videojs 播放以及初始化

前言

最近有个视频回放的功能，第三方给我这边rtmp协议的接口，rtmp协议在浏览器端是需要借助flash插件的，现在主流浏览器都不再支持flash了，火狐最后支持的版本是84.0.2、谷歌的87.0.4270.0，这个可以上网搜一下。除了这种方式还有常用三种协议格式，http-flv和http-Websoket协议格式前端可以用flv.js接收播放, hls协议原生video.js可以播放，如果是实时视频的话不推荐会有几秒延迟，回放的可以考虑在内。说了这么多，由于一些原因，这个功能只能选择rtmp协议。

一、在vue中使用video.js

1.npm 安装 video.js

npm i video.js

2.引入video.js

//全局引入在 main.js 中进行引入
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;
//局部引入在页面引入
 import videojs from "video.js"
 import "video.js/dist/video-js.css"

3.我这里是给它封装成了一个组件

做了两个按钮手动触发和关闭，我这边需求是回放，点击播放时先显示时间弹框，点确认时再触发视频，这个按照个人需求不需要的话取video就行

template配置

<template>
    <div class="video-details" id="video-detailss">
       <div class="video-mm" id="video-mm">
       <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered"  
       preload="none"></video>
       </div>
      <div class="btns">
      <el-button size="mini"  @click="handlePlays">点击播放</el-button>
      <el-button size="mini" @click="handleClear">关闭销毁</el-button>
      </div>
 </div>   
</template>  

引入video.js

 //这是个时间处理
import moment from 'moment'
 import videojs from "video.js"
 import "video.js/dist/video-js.css"

props接收父组件传过来的值

 props: {
      liftInfoData: {
        type: Object,
        default: {},
      },
      
    },

触发销毁事件

   otherCloseVideo() {
        if (this.videoPlayers != null) { 
          this.videoPlayers.pause() //关闭
          this.videoPlayers.dispose();//销毁
          this.videoPlayers = null
        }
      },

关闭这个组件时触发video.js销毁

如果不销毁会一直占用你的浏览器内存，直到把浏览器崩溃

beforeDestroy() {
      this.otherCloseVideo() //调用上方的销毁事件
    },

销毁创建初始化

我这里的点播放的时候跳出选择时间节点的弹框，点确定时触发事件，先判断有无videoPlayers，有就给他先销毁再创建，你也可以选择我下方的重置，一样可以达到切换视频的效果。

handlePlay() { 
        if (this.videoPlayers) {
          this.videoPlayers.dispose();//dispose该销毁是销毁的所有dom节点
           $("#video-mm").html(' <video id="myvideo" class="video-js vjs-default-skin vjs- 
          big-play-centered"  preload="none"></video>');//手动再创建
        //这里隐藏掉的是重置播放器,重新选择地址，达到一个切换视频的效果，不太符合需求所以没有采用
         //  this.videoPlayers.reset();
        //  this.videoPlayers.src([
        //             {
        //                 type: 'application/x-mpegURL',
        //                 src:this.godSrc
        //             },
        //         ]);
        //  this.videoPlayers.load();
        // this.videoPlayers.play();   
        }
        let that=this
       that.videoPlayers = videojs("myvideo", {
         //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用 
           autoplay属性或通过Player API。
          // controls: true,
          //自动播放属性,muted:静音播放
          muted: true,
          autoplay: true,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "960px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "522px",
          //这里面放的就是视频的地址
          sources: [{
            src: that.godSrc
          }],
          playbackRates: [0.5, 1, 1.5, 2] //倍速播放
       }, function () {
        console.log("videojs播放器初始化成功");
      });
         that.videoPlayers.play();
          },

最后的实现效果