当现有video播放器不能满足需要时，须要本人对video进行封装。
video事件
loadstart: 在视频开始加载时触发，给currentTime赋值(历史播放记录或0)。durationchange: 元信息已载入或已扭转，视频的长度产生了扭转。获取到视频长度(duration，并给currentTime赋值(历史播放记录或0))。playing: 在视频开始播放时触发（不论是首次播放、在暂停后复原、或是在完结后从新开始）。pause: 播放暂停时触发。timeupdate: currentTime扭转, 更新播放进度。解决播放进度条seeked: 指定播放地位waiting: 缓冲ended: 播放完结, 重置状态WeixinJSBridgeReady: 在微信中应用video，须要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令。
直播协定
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视频格式做的直播散发流，延时低。但挪动端不反对。
论断：HTTP-FLV延时低，优先应用。若设施不反对HTTP-FLV，应用flv.js。若设施不反对flv.js，则应用HLS，但HLS提早大。
封装video
/** 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; } }}[参考文章]:
- X5内核视频两种播放状态
- H5直播Video标签坑汇总
- H5直播入门（实践篇）
- 全面进阶 H5 直播