ionic中的在线视频播放功能
最新推荐文章于 2020-04-29 17:46:07 发布
原创最新推荐文章于 2020-04-29 17:46:07 发布·4.7k 阅读
4·
·
1
· 1 4·CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。
本文介绍在Ionic中实现H5在线视频播放的方法，包括使用的关键代码、样式及指令逻辑，并提供了一个示例项目。前言
在ionic中处理视频播放的功能在stackoverflow, ionic-forum以及ionic的github issue中都有提及，有很多相关讨论， 我们只针对在线视频播放功能进行下总结，之前用过videogular这款插件,但在实际播放中的效果并不是很好。在实际开发中可以使用新浪微博网页版中的视频链接做测试(备注：新浪视频优化的比较好，播放很流畅) ，本文作为ionic中h5播放在线视频的一种思路来阐述，当然还有改进的空间。
效果预览
必要说明：其中git动画图片由于大小有限制和保持高清，做了加速处理，在真机上已播放的进度呈现不同颜色，体验会更好。另外，暂时没找到相关视频缓冲了多少的api, 所以缓冲进度没有做处理。
刚刚在知乎上找到了这个：Media.buffered 使用buffered.start(index)和buffered.end(index) 可以获取缓冲段 , 有时间再来试下。
github演示地址
Video模块中的html
关键代码：
<ion-viewcache-view='false' class='video' ng-class="{cur:renderData.hideBar}"><ion-header-bar class="bar-stable"><button ng-click="back()"><i class="ion-arrow-left-c"></i> Back</button><h1 class="title">video预览</h1></ion-header-bar><ion-content scroll="false" overflow-scroll="true"data-tap-disable="true" scrollbar-y="false" has-bouncing="false"><video-container x-source="renderData.videoSrc"></video-container></ion-content></ion-view>说明： 其中overflow-scroll="true" 与data-tap-disable="true" 在视频播放中起到了关键的作用，这两句话要加上其中一个。有关data-tap-disable="true" 在官网上也做了一些具体说明
Video模块中的controller
关键代码：
.controller('VideoCtrl', ['$scope','$sce','appUtils',function($scope,$sce, appUtils) {$scope.back = appUtils.back;var renderData =$scope.renderData = {}; renderData.videoSrc =$sce.trustAsResourceUrl('http://static.videogular.com/assets/videos/videogular.mp4'); renderData.hideBar =false;// 控制是否隐藏 bar/* 视图事件 */$scope.$on('$ionicView.afterEnter',function() {// 锁定屏幕,让其全屏横屏显示if (!window.cordova) {return; } window.screen.orientation.lock('landscape'); });$scope.$on('$ionicView.afterLeave',function() {// 还原成竖屏if (!window.cordova) {return; } window.screen.orientation.lock('portrait'); });// 接收广播$scope.$on('videoBarHide',function(event, data) {if (!data) {return; } renderData.hideBar =true;$scope.$apply(); });$scope.$on('videoBarShow',function(event, data) {if (!data) {return; } renderData.hideBar =false;$scope.$apply(); }); } ]);
此处有必要进行详细的说明：
- 此处的视频地址从上一个模块中挂到url上传递过来的
- 进入视频模块中强制横屏，退出视频模块时强制竖屏的一款cordova插件cordova-plugin-screen-orientation， 此插件在iOS10,11中要注意测试下, 如不工作,需要特殊处理。
- 通过接收指令中的广播来进行动画处理，header-bar 和播放控制按钮的隐藏，详情请看下面的指令相关。
Video模块中的指令模板
关键代码：
<divclass="video-container"><!-- 视频源 --><videopreload="metadata"webkit-playsinline="webkit-playsinline"poster="images/post-bg.gif"><sourceng-src="{{source}}"type="video/mp4" /></video><!-- 视频播放控制区 --><divclass="video-controll-bar clearfix"ng-class="{cur: videoData.hide}"><!-- 播放,暂停 --><divclass="play-btn pull-left"ng-class="{cur:videoData.playing}"on-tap="play()"><spanclass="playing-btn"></span></div><divclass="video-time pull-left"><spanclass="now-time">{{videoData.current ?videoData.current : '00:00:00'}}</span> /<spanclass="total-time">{{videoData.duration ?videoData.duration : '00:00:00'}}</span></div><divclass="video-progress-zone range"><divclass="video-range-track center-center"></div><inputclass="video-range-input center-center"type="range"value="0"min="0"max="{{videoData.durationOrigin}}"ng-model="videoData.currentOrigin"ng-change="seeking()"></div></div><!-- 视频缓冲loading --><divclass="video-loading center-center"ng-if="videoData.isLoading"><ion-spinnericon="dots"></ion-spinner></div></div>说明：此处不附带css样式文件的说明，另：在ionic中input range插件做的很好，只需要改改样式，就可以变成自定义的状态
Video模块中的播放进度条样式和相关动画参考
css 参考代码：
.videoion-content{margin-top: -44px;}.video.scroll{overflow: hidden;}.video-container,.video-containervideo{width:100%;height:100%;background:#000;}.video-controll-bar{position: fixed;bottom:0;width:100%;height:56px;line-height:56px;background-color:rgba(0,0,0,.3);transition: all .2s ease-out0s;-webkit-transition: all .2s ease-out0s;}.video-time{margin-left:10px;font-size:13px;color:#fff;}.play-btn{width:56px;height:56px;}.playing-btn{display: block;width:100%;height:100%;background:url(../images/play-btn.png) no-repeat center -23px;background-size:45% auto;}.play-btn.cur.playing-btn{background-position: center18px;background-size:50% auto;}.video-progress-zone.video-range-input{width:100%;margin:0;padding:0;border: none;box-shadow: none;background: none;height:15px;}.video-progress-zone.video-range-track{width:100%;height:3px;background-color:rgba(255,255,255, .3);}.video-progress-zone{position: absolute;top: -1px;left:0;right:0;width:100%;height:0;}.video-controll-bar.video-range-input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;cursor: default;top:0;height:12px;width:12px;background:#fff;border-radius:50%;box-shadow:003px#fff;overflow: visible;position: relative;}.video-controll-bar.video-range-input[type="range"]::-webkit-slider-thumb:before{position: absolute;content:' ';top:5px;left: -1998px;background:#fff;}.video-container.spinner{fill:#808080;}.video-container.spinnersvg{width:70px;height:70px;}/* 隐藏bar的动画 */.video.cur.video-controll-bar{transform:translate3d(0,56px,0);-webkit-transform:translate3d(0,56px,0);}.video.curion-header-bar{transform:translate3d(0, -44px,0);-webkit-transform:translate3d(0, -44px,0);}说明：样式图片需要自己来引用处理，此处只作为参考
Video模块中的指令逻辑
关键代码：
.directive('videoContainer',function(appUtils) {return { restrict:'EA', templateUrl:'components/directives/html/video.html', scope: { source:'=' }, link:function(scope, element) {// 初始化数据成员// 视频默认是要点击后播放的var video = element.find('video')[0];// 获取视频元素var videoFlag =0;// 用于检测video播放var videoData = scope.videoData = {}; videoData.playing =false;// 控制是否播放中 videoData.currentOrigin =0;// 当前播放进度// 点击播放按钮或暂停功能 scope.play =function() {if (!videoData.playing) { video.autoplay = videoData.playing =true; video.play(); }else { video.autoplay = videoData.playing =false; video.pause(); } };// 滑动功能实现 scope.seeking =function() { video.currentTime = videoData.currentOrigin; videoFlag =0; };// 事件监听// 开始播放 , 初始化所有数据 ionic.EventController.on('loadstart',function() { videoData.playing = this.autoplay =false;// 默认是播放状态，同loading videoData.isLoading =true;// 开始loading scope.$apply(); }, video);// 元数据加载完成后 此时获取时长 ionic.EventController.on('loadedmetadata',function() { appUtils.checkToGetMediaDuration(scope, video, videoData); videoFlag =0;// 此处归零 表示视频 this.autoplay = videoData.isLoading =false;// 为了兼容 scope.$apply(); }, video); ionic.EventController.on('durationchange',function() { appUtils.checkToGetMediaDuration(scope, video, videoData); this.autoplay =true;// 为了兼容 scope.$apply(); }, video);// onprogress 正在下载中 ionic.EventController.on('progress',function() { appUtils.checkToGetMediaDuration(scope, video, videoData); scope.$apply(); }, video);// waiting ionic.EventController.on('waiting',function() { videoData.isLoading = this.autoplay =true;// 为了兼容 true; // 无法继续播放时loading videoData.playing =true;// 同样保持播放状态 scope.$apply(); }, video);// seeking ionic.EventController.on('seeking',function() { videoData.isLoading = videoData.playing = this.autoplay =true;// 为了兼容 = true ; seeking 保持播放状态 this.play();// 强制播放 scope.$apply(); }, video);// 在可播放时 只会触发一次 , 播放按钮状态 : 可播放 ionic.EventController.on('playing',function() { appUtils.checkToGetMediaDuration(scope, video, videoData); this.autoplay = videoData.isLoading =true;// 为了兼容 此处 loading 应为 false ,但安卓低端机器存在问题 scope.$apply(); }, video);// 监听暂停事件 ionic.EventController.on('pause',function() { videoData.playing = videoData.isLoading =false; scope.$apply(); }, video);// 音频播放位置发生改变时触发/* 设置为自动隐藏 */ ionic.EventController.on('timeupdate',function() { appUtils.checkToGetMediaDuration(scope, video, videoData); videoData.currentOrigin = video.currentTime;// 获取视频当前时间 videoData.current = appUtils.handlePlayingTime(video.currentTime);// 获取格式转换之后的视频当前时间if (videoFlag >=1) {// timeupdate 时,开始播放 兼容问题 videoData.isLoading =false; videoData.playing =true;// 播放按钮呈现 }if (videoFlag ===10) { videoData.hide =true; scope.$emit('videoBarHide',1);// 发送广播, 隐藏bar } videoFlag++; scope.$apply(); }, video);// 触摸取消隐藏 ionic.EventController.on('touchstart',function() { videoFlag =0; scope.$emit('videoBarShow',1);// 发送广播, 显示bar }, video);// 视频可以流畅播放到结束 ionic.EventController.on('canplaythrough',function() {}, video);// 视频可以流畅播放 ionic.EventController.on('canplay',function() {}, video);// 播放完成 ionic.EventController.on('ended',function() { this.pause(); scope.hide =false;// 显示 scope.$apply(); }, video); } }; });说明： 关于appUtils中的方法请看前面的博文
关于兼容性
目前在一些安卓系统版本中对loadstart等一系列事件支持的不太好, 但iOS和高版本的安卓系统支持的很好，此种方案是一种h5视频播放的解决方案，作为开发人员的一项参考。
扫一扫
814参与评论您还未登录，请先登录后发表或查看评论
到【灌水乐园】发言
