基于vue的video播放器的实现示例


Posted in Vue.js onFebruary 19, 2021

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

到此这篇关于基于vue的video播放器的实现示例的文章就介绍到这了,更多相关vue video播放器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
yii中widget的用法
2014/12/03 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
vue中的inject学习教程
2019/04/24 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
python if not in 多条件判断代码
2016/09/21 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
出国留学计划书
2014/04/27 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python