ionic中的在线视频播放功能

本文主要是介绍ionic中的在线视频播放功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在ionic中处理视频播放的功能在stackoverflow, ionic-forum以及ionic的github issue中都有提及，有很多相关讨论，我们只针对在线视频播放功能进行下总结，之前用过videogular这款插件,但在实际播放中的效果并不是很好。在实际开发中可以使用新浪微博网页版中的视频链接做测试(备注：新浪视频优化的比较好，播放很流畅) ，本文作为ionic中h5播放在线视频的一种思路来阐述，当然还有改进的空间。

效果预览

这里写图片描述

必要说明：其中git动画图片由于大小有限制和保持高清，做了加速处理，在真机上已播放的进度呈现不同颜色，体验会更好。另外，暂时没找到相关视频缓冲了多少的api, 所以缓冲进度没有做处理。
刚刚在知乎上找到了这个：Media.buffered 使用buffered.start(index)和buffered.end(index) 可以获取缓冲段 , 有时间再来试下。

github演示地址

https://github.com/johnnynode/ionic-samples

Video模块中的html

关键代码：

<ion-view cache-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模块中的指令模板

关键代码：

<div class="video-container"><!-- 视频源 --><video preload="metadata" webkit-playsinline="webkit-playsinline" poster="images/post-bg.gif"><source ng-src="{{source}}" type="video/mp4" /></video><!-- 视频播放控制区 --><div class="video-controll-bar clearfix" ng-class="{cur: videoData.hide}"><!-- 播放,暂停 --><div class="play-btn pull-left" ng-class="{cur:videoData.playing}" on-tap="play()"><span class="playing-btn"></span></div><div class="video-time pull-left"><span class="now-time">{{videoData.current ? videoData.current : '00:00:00'}}</span>/<span class="total-time">{{videoData.duration ? videoData.duration : '00:00:00'}}</span></div><div class="video-progress-zone range"><div class="video-range-track center-center"></div><input class="video-range-input center-center" type="range" value="0" min="0" max="{{videoData.durationOrigin}}" ng-model="videoData.currentOrigin" ng-change="seeking()"></div></div><!-- 视频缓冲loading --><div class="video-loading center-center" ng-if="videoData.isLoading"><ion-spinner icon="dots"></ion-spinner></div>
</div>

说明：此处不附带css样式文件的说明，另：在ionic中input range插件做的很好，只需要改改样式，就可以变成自定义的状态

Video模块中的播放进度条样式和相关动画参考

css 参考代码：

.video ion-content{margin-top: -44px;
}.video .scroll {overflow: hidden;
}.video-container, .video-container video {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-out 0s;-webkit-transition: all .2s ease-out 0s;
}.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: center 18px;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: 0 0 3px #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 .spinner svg {width: 70px;height: 70px;
}/* 隐藏bar的动画 */
.video.cur .video-controll-bar{transform: translate3d(0, 56px, 0);-webkit-transform: translate3d(0, 56px, 0);
}.video.cur ion-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; // 默认是播放状态，同loadingvideoData.isLoading = true; // 开始loadingscope.$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);// waitingionic.EventController.on('waiting', function() {videoData.isLoading = this.autoplay = true; // 为了兼容 true; // 无法继续播放时loadingvideoData.playing = true; // 同样保持播放状态scope.$apply();}, video);// seekingionic.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);}};});