视频插件之video.js

videojs初始化
video.js有两种初始化方式，一种是在video的html标签之中，一种是使用js来进行初始化。两种都需先引入video.js和video-js.css

<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

在video的html标签之中，
<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"//封面地址
    width="600"
    height="400"
    data-setup='{}'>
//视频地址
  <source src="http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4" type="video/mp4"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

使用js来进行初始化
 <video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>
function options() {
        return {
            height:200,
            controls: true, // 是否显示控制条
            poster: 'https://pic.ibaotu.com/01/43/09/92V888piCuNR.jpg-0.jpg!ww7002', // 视频封面图地址
            preload: 'auto',
            autoplay: false,
            fluid: false, // 自适应宽高
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            inactivityTimeout: false,
            controlBar: { // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否*/
                'remainingTimeDisplay': true,
                'currentTimeDisplay': true,
                'timeDivider': true,
                'durationDisplay': true,
                'playToggle': true,
                volumePanel: {
                    inline: false,
                },

                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [
                    { name: 'playToggle' }, // 播放按钮
                    { name: 'currentTimeDisplay' }, // 当前已播放时间
                    { name: 'progressControl' }, // 播放进度条
                    { name: 'durationDisplay' }, // 总时间
                    { // 倍数播放
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                    },
                    {
                        name: 'volumePanel', // 音量控制
                        inline: false, // 不使用水平方式
                    },
                    { name: 'FullscreenToggle' } // 全屏
                ]
            },
            sources: [ // 视频源
                {
                    src: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
                    type: 'video/mp4',
                    poster: '//vjs.zencdn.net/v/oceans.png'
                },
            ]

        }
    }
    var player = videojs(document.getElementById('myVideo'), options(), function () {
        console.log('视频可以播放了', this);
    });

可参考https://cloud.tencent.com/developer/article/1615717