基于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 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
第1次亲密接触PHP5(2)
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
《燕子》教学反思
2014/02/18 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
初三班主任寄语大全
2014/04/04 职场文书
给学校的建议书范文
2014/05/15 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
mysql 索引合并的使用
2021/08/30 MySQL
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
python中urllib包的网络请求教程
2022/04/19 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers