如何在vue中使用video实现一个播放器功能

这期内容当中小编将会给大家带来有关如何在Vue中使用video实现一个播放器功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

当现有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

<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="h6-page"  x5-video-orientation="portraint"   >  <source :src="options.src" /> </video> <!-- video poster --> <div  v-show="showPoster"  class="video__poster"  : ></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>

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;  } }}

上述就是小编为大家分享的如何在vue中使用video实现一个播放器功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网精选频道。