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

来源:脚本之家  责任编辑:小易  

当现有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 的播放器组件Vue-Video-Player操作vue-video-player视频播放器使用配置详解基于vue-video-player自定义播放器的方法

  • 本文相关:
  • vue中的使用token的方法示例
  • 详解基于vue/react项目的移动端适配方案
  • nuxt.js 在middleware(中间件)中实现路由鉴权操作
  • vue 实现cli3.0中使用proxy进行代理转发
  • vue项目结合vue-layer实现弹框式编辑功能(实例代码)
  • vue3.0搭配.net core实现文件上传组件
  • vue中当图片地址无效的时候,显示默认图片的方法
  • 解决vue 绑定对象内点击事件失效问题
  • vue组件教程之toast(vue.extend 方式)详解
  • 浅谈vue ssr中的bundle的具有使用
  • vuejs怎么j实现通过点击最外层的div而让最里面的au...
  • 如何使用 vue.js 实现实时预览
  • 关于vue播放器的插件有哪些?
  • vue-video-played 怎么用
  • 如何用vue.js编写一个完整的网页
  • HTML5中 使用video标签 播放本地视频
  • vue.js中,在一个vue组件中,想通过点击按钮,才加...
  • 请问大神知道京东这样的定位效果展示,用java语言怎...
  • 1、Vue.js 有哪些特点和Web开发中常见的高级功能?
  • 在Vue.js项目中如何使用阿里云视频点播的JavaScrip...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.js适用于 vue 的播放器组件vue-video-player操作vue-video-player视频播放器使用配置详解基于vue-video-player自定义播放器的方法vue中的使用token的方法示例详解基于vue/react项目的移动端适配方案nuxt.js 在middleware(中间件)中实现路由鉴权操作vue 实现cli3.0中使用proxy进行代理转发vue项目结合vue-layer实现弹框式编辑功能(实例代码)vue3.0搭配.net core实现文件上传组件vue中当图片地址无效的时候,显示默认图片的方法解决vue 绑定对象内点击事件失效问题vue组件教程之toast(vue.extend 方式)详解浅谈vue ssr中的bundle的具有使用vue引用js文件的多种方式(推荐)详解vue 路由跳转四种方式 (带参vue之父子组件间通信实例讲解(prvue props用法详解(小结)简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue项目刷新当前页面的三种方法使用vue实现图片上传的三种方式vue实现文件上传功能vue.js常用指令汇总(v-if、v-fo解决vue build打包之后首页白屏的问题vue计算属性时v-for处理数组时遇到的一个vue实现输入框的模糊查询的示例代码(节流vue select选择框数据变化监听方法vue中使用props传值的方法解决antd datepicker 获取时间默认少8个小vue实现前台列表数据过滤搜索、分页效果vue项目中使用ueditor的实例讲解完美解决通过ip地址访问vue项目的问题windows下vue-cli导入bootstrap样式
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved