基于vue的视频播放器
当现有的视频播放器无法满足需求时,需要自己对视频进行打包。视频属性src:视频URLposter:视频封面currentTime:当前视频播放位置,以秒为单位duration:视频时长,单位秒loop:设置视频是否循环播放,取值为true/false。为true时,视频播放结束后,会自动回到视频开始的地方。autoplay:设置视频是否自动播放,取值为true/false。muted:设置视频的音频默认状态,取值为true/false。如果为false,则静音。webkit-playsinline='true'playsinline='true':视频在元素区域内播放。防止ios用户全屏自动播放视频preload='auto':优先加载视频x5-video-player-type='h5-page':启用X5内核同层渲染x5-video-orientation='portraint':设置播放器支持方向,竖屏视频事件loadstart:视频开始加载时触发,给currentTime赋值(历史播放记录或0)。durationchange:元信息已加载或更改,视频长度已更改。获取视频时长(duration,给currentTime赋值(历史播放记录或0))。playing:视频开始播放时触发(无论是最初播放、暂停后继续播放还是结束后重新播放)。pause:播放暂停时触发。timeupdate:当前时间变化,更新播放进度。处理寻求的播放进度条:指定播放位置waiting:bufferended:播放结束,重置状态功能。直播协议HLS(HTTPLiveStreaming)是苹果公司提出的直播协议。IOS和更高版本的Android都支持HLS。HLS主要由.m3u8和.ts播放文件组成。HLS具有高兼容性和高扩展性,但会延迟直播。HLS协议将直播流分成小块视频下载播放,所以假设list包含5个ts文件,每个ts文件包含5秒的视频内容,那么整体延迟为25秒。RTMP(RealTimeMessagingProtocol)是Macromedia公司开发的直播视频协议,现归Adobe所有。基于flash的RTMP无法在IOS浏览器中播放,但实时性优于HLS。HTTP-FLV针对的是FLV视频格式的直播流,低延迟。但是移动端不支持。结论:HTTP-FLV延迟低,优先使用。如果设备不支持HTTP-FLV,请使用flv.js。如果设备不支持flv.js,就用HLS,但是HLS延迟比较大。封装video/**HTML**/
/**js**/props:{选项:{类型:对象,默认:()=>{}}},data(){return{videoPlay:false,//是否正在播放videoEnd:false,//是否正在播放结束showPoster:true,//是否显示视频封面showLoading:false,//LoadingcurrentTime:0,//当前播放位置currentVideo:{duration:this.options.duration},}},mounted(){this.videoPlayer=this.$refs.videoPlayer;this.videoPlayer.currentTime=0;this.videoPlayer.addEventListener("loadstart",e=>{this.videoPlayer.currentTime=(this.options.playProcess>0)?this.options.playProcess:0;});//获取视频长度this.videoPlayer.addEventListener("durationchange",e=>{this.currentVideo.duration=this.videoPlayer.duration;//有播放历史this.videoPlayer.currentTime=(this.options.playProcess>0)?this.options.playProcess:0;});this.videoPlayer.addEventListener("播放",e=>{this.showPoster=false;this.videoPlay=true;this.showLoading=false;this.videoEnd=false;});//暂停this.videoPlayer.addEventListener("pause",()=>{this.videoPlay=false;if(this.videoPlayer.currentTime<0.1){this.showPoster=true;}this.showLoading=false;});//更新播放进度this.videoPlayer.addEventListener("timeupdate",e=>{this.currentTime=this.videoPlayer.currentTime;},false);//指定播放位置this.videoPlayer.addEventListener("seeked",e=>{});//缓冲this.videoPlayer.addEventListener("waiting",e=>{this.showLoading=true;});//播放结束this.videoPlayer.addEventListener("ended",e=>{//重置状态this.videoPlay=false;this.showPoster=真;this.videoEnd=true;this.currentTime=this.currentVideo.duration;});//监听weixinJSBridgeReady事件,处理微信不能自动播放但不是全部适用,添加暂停按钮,手动播放。document.addEventListener('WeixinJSBridgeReady',()=>{this.videoPlayer.play();},false);},methods:{handleVideoPlay(){if(this.videoPlayer.paused){//播放if(this.videoEnd){//重播this.currentTime=0;this.videoPlayer.currentTime=0;}this.videoPlayer.play();this.videoPlay=true;}else{//暂停this.videoPlayer.pause();this.videoPlay=false;}}}当H5分享页面跳转到APP时,暂停视频播放。通过监听visibilitychange(可见性改变)事件,当页面内容隐藏时,暂停播放。document.addEventListener("visibilitychange",this.visibilitychange,false);visibilitychange(){if(document.hidden){console.log('hidden');this.videoPlayer.pause();this.isPlay=false;}else{console.log('Visible');}}【参考文章】:X5核心视频两种播放形式H5直播Video标签坑汇总