当现有video播放器不能知足需求时,须要本身对video进行封装。html
<video preload="auto" /** 视频优先加载 **/ autoplay=true /** 自动播放 **/ muted=false /** 开启音频 **/ webkit-playsinline="true" /** 防止IOS用户播放视频时自动全屏 **/ playsinline="true" x-webkit-airplay="allow" /** 支持Airplay的设备(如:音箱、Apple TV)播放 **/ x5-video-player-type="h5-page" /** 启用X5内核同层渲染 **/ x5-video-orientation="portraint" style="object-fit:cover;" > <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video>
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'
: 设置播放器支持的方向,竖屏ios
loadstart
: 在视频开始加载时触发,给currentTime赋值(历史播放记录或0)。durationchange
: 元信息已载入或已改变,视频的长度发生了改变。获取到视频长度(duration,并给currentTime赋值(历史播放记录或0))。playing
: 在视频开始播放时触发(不管是初次播放、在暂停后恢复、或是在结束后从新开始)。pause
: 播放暂停时触发。timeupdate
: currentTime改变, 更新播放进度。处理播放进度条seeked
: 指定播放位置waiting
: 缓冲ended
: 播放结束, 重置状态WeixinJSBridgeReady
: 在微信中使用video,须要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令。web
HLS(HTTP Live Streaming)
由Apple提出的直播流协议。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts两种播放文件。HLS具备高兼容性,高可扩展性,但会直播延时。HLS协议是将直播流分红一段一段的小段视频去下载播放的,因此假设列表里面的包含5个ts文件,每一个ts文件包含5秒的视频内容,那么总体的延迟就是25秒。RTMP(Real Time Messaging Protocol)
是Macromedia开发的一套视频直播协议,如今属于Adobe。RTMP基于flash没法在IOS的浏览器里播放,可是实时性比HLS要好。HTTP-FLV
针对于FLV
视频格式作的直播分发流,延时低。但移动端不支持。segmentfault
结论:HTTP-FLV
延时低,优先使用。若设备不支持HTTP-FLV,使用flv.js
。若设备不支持flv.js,则使用HLS,但HLS延迟大。api
/** HTML **/ <div class="video"> <!-- video player --> <video class="video__player" ref="videoPlayer" preload="auto" :autoplay="options.autoplay" :muted="options.muted" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5-page" x5-video-orientation="portraint" style="object-fit:cover;" > <source :src="options.src" /> </video> <!-- video poster --> <div v-show="showPoster" class="video__poster" :style="{'background-image': 'url(' + options.pic + ')'}" ></div> <!-- video loading --> <div v-show="showLoading" class="video__Loading"> <span class="video__Loading-icon"></span> </div> <!-- video pause --> <div @click="handleVideoPlay" class="video__pause"> <span v-show="!videoPlay" class="video__pause-icon"></span> </div> </div>
/** js**/ props: { options: { type: Object, default: () => {} } }, data() { return { videoPlay: false, // 是否正在播放 videoEnd: false, // 是否播放结束 showPoster: true, // 是否显示视屏封面 showLoading: false, // 加载中 currentTime: 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("playing", 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 = true; 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; } } }
经过监听visibilitychange
(能见度更改)事件,当页面的内容被隐藏时,暂停播放。浏览器
document.addEventListener("visibilitychange", this.visibilitychange, false); visibilitychange () { if (document.hidden) { console.log('隐藏'); this.videoPlayer.pause(); this.isPlay = false; } else { console.log('可见'); } }
[参考文章]:微信