video.js使用总结

video.js是通过HTML5将原生的video标签进行渲染的js开源工具。拥有更多的API，进行个性化定制。

在vue项目中引入video.js

package.json:

"dependencies": {
    "video.js": "^7.20.3"
}

npm install

<template>
  <div :style="styleColor" ref="videoDiv">

  </div>
</template>

<script>
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import videojs from "video.js";
import "video.js/dist/video-js.css";

videojs.addLanguage('zh_cn', video_zhCN);

expert default: {
    methods: {
        initVideo() {
            // video标签无法动态加载src，所以在vue中如果是动态写入视频地址，js加载在HTML渲染之后，会导致video在取src时无法解析。
            // 所以需要用js在获取到src值之后生成HTML元素
          this.$refs.videoDiv.innerHTML =
            '<video class="video-js vjs-big-play-centered" style="width: 100%; height: 100%" controls></video>';
          this.player = videojs(this.$refs.videoDiv.firstElementChild, {
            controls: true, // 是否显示控制条
            poster: 'xxxxxx', // 封面
            preload: 'auto', // 自动加载资源
            autoplay: true,//自动播放
            fluid: true, // 自适应宽高
            language: 'zh_cn', // 设置语言，语言需要使用videojs.addLanguage()进行添加。
            muted: false, // 是否静音
            loop: this.options.setup.loop,
            inactivityTimeout: false,
            controlBar: { // 设置控制条组件             
              /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
              children: [
                {name: 'playToggle'}, // 播放按钮
                {name: 'currentTimeDisplay'}, // 当前已播放时间
                {name: 'progressControl'}, // 播放进度条
                {name: 'durationDisplay'}, // 总时间
                {name: 'audioTrackButton'},
                { // 倍数播放
                  name: 'playbackRateMenuButton',
                  'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                },
                {
                  name: 'volumePanel', // 音量控制
                  inline: false, // 不使用水平方式
                },
                // {name: 'AutoPlayNext'},     //控制是否自动播放下一个
                {name: 'FullscreenToggle'} // 全屏
              ]
            },
            sources: [
              {
                src: `${this.srcAddress}`,
                type: 'video/mp4',
              },
              {
                src: `${this.srcAddress}`,
                type: 'video/ogg',
              }
            ]
          }, function () {
            console.log('ready');
          });
        },
    }
}
</script>

<style scoped>

</style>

<style>
/*
    在video.js 7中，controlBar设置当前时间、总时间、倍速按钮都无法显示。浏览器中这几个组件display为none
    只能通过重写style的方式将当前时间和总时间显示出来
*/
.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  display: block !important;
}
.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  display: block !important;
}
</style>

原生video标签相关

<!-- video标签内controlslist属性可以设置nodownload nofullscreen noremoteplayback 3个值，分别为不可下载、不可全屏、不可远程控制 -->
<!-- disablePictureInPicture属性可以关闭画中画选项 -->
<video controls controlslist="nodownload" disablePictureInPicture></video>


<style>
    /*
    	取消全屏按钮的现实
    */
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
</style>