vue2 使用video.js

页面内使用

vue2 使用 npm install video.js@6.13.0

// 外层div
<div class="video-class" v-if="isShowVideoDialog">
  <!-- <video width="100%" height="100%" controls :src="playUrl"></video> -->
  <video
    ref="videoPlayerRef"
    class="video-js"
  >
    <source
      :src="playUrl"
      type="video/mp4"
    >
  </video>
</div>

// data内属性以及值
data () {
  return {
        videoPlayerOption: {
          controls: true, //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 
          poster: '',//封面
          autoplay: false, //自动播放属性,
          muted: false, // 静音播放
          preload: 'auto', //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          fluid: true
      }
  }
} 

// js 使用
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'

this.$nextTick(() => {
  Videojs(
    this.$refs.videoPlayerRef,
    this.videoPlayerOption,
    function onPlayerReady() {
      console.log('onPlayerReady', this);
      this.on('suspend', function() {
        //延迟下载
	console.log("延迟下载")
      });
    });
}) 

常用配置选项

autoplay: false, //自动播放：true/false
controls: true, //是否显示底部控制栏：true/false
width: 300, //视频播放器显示的宽度
height: 300, //视频播放器显示的高度
loop: false, //是否循环播放:true/false
muted: false, //设置默认播放音频：true/false
poster:"", //视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
src:"", //要嵌入的视频资源url，The source URL to a video source to embed.
techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
notSupportedMessage: false, //是否允许重写默认的消息显示出来时，video.js无法播放媒体源
plugins: {}, //插件
sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签 
aspectRatio:"1:1" //将播放器置于流体模式下，计算播放器动态大小时使用该值。该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
fluid: false,	//是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
// 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
preload: "metadata", //建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载).auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
// metadata: 只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。

常用事件

this.on('suspend', function() {//延迟下载
  console.log("延迟下载")
});
this.on('loadstart', function() { //客户端开始请求数据
  console.log("客户端开始请求数据")
});
this.on('progress', function() {//客户端正在请求数据
  console.log("客户端正在请求数据")
});
this.on('abort', function() {//客户端主动终止下载（不是因为错误引起）
  console.log("客户端主动终止下载")
});
this.on('error', function() {//请求数据时遇到错误
  console.log("请求数据时遇到错误")
});
this.on('stalled', function() {//网速失速
  console.log("网速失速")
});
this.on('play', function() {//开始播放
  console.log("开始播放")
});
this.on('pause', function() {//暂停
  console.log("暂停")
});
this.on('loadedmetadata', function() {//成功获取资源长度
  console.log("成功获取资源长度")
});
this.on('loadeddata', function() {//渲染播放画面
  console.log("渲染播放画面")
});
this.on('waiting', function() {//等待数据，并非错误
  console.log("等待数据")
});
this.on('playing', function() {//开始回放
  console.log("开始回放")
});
this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停
  console.log("可以播放，但中途可能因为加载而暂停")
});
this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕
  console.log("可以播放，歌曲全部加载完毕")
});
this.on('seeking', function() { //寻找中
  console.log("寻找中")
});
this.on('seeked', function() {//寻找完毕
  console.log("寻找完毕")
});
this.on('timeupdate', function() {//播放时间改变
  console.log("播放时间改变")
});
this.on('ended', function() {//播放结束
  console.log("播放结束")
});
this.on('ratechange', function() {//播放速率改变
  console.log("播放速率改变")
});
this.on('durationchange', function() {//资源长度改变
  console.log("资源长度改变")
});
this.on('volumechange', function() {//音量改变
  console.log("音量改变")
});

大佬传送门：https://blog.csdn.net/little__SuperMan/article/details/89203270

封装组件

传送门：https://blog.csdn.net/qq_52050769/article/details/120057519