Video.js 是一个功能强大的HTML视频播放器。简单记录一下用法。

一. 初始化

1. 自动

给video标签加上data-setup标签，在里面写参数。

  • data-setup需用单引号，因为里面的内容应该是JSON格式。

    <video class="video-js" data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>

2. 手动

<video class="video-js" id="my-player">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>

直接调用videojs()，可传入video元素的id或者dom。

videojs('my-player');
videojs(document.querySelector('video'));

二. 设置参数/选项

1. 在video标签中填入

<video controls autoplay preload="auto" ...>

  • 布尔值选项只要出现在标签的属性中，即为true，即使将它设置为false也仍然为true。不出现在属性中才是false。
    比如以下例子中：="true"无需填入，controls属性仍然是true。

    <video controls="true" ...>
<video loop="true" ...>
<video controls="false" ...>

    2. 在data-setup中设置

    <video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>

3. 手动初始化的时候设置

videojs('my-player', {
  controls: true,
  autoplay: false,
  preload: 'auto'
});

4. 设置全局/默认参数

videojs.options.autoplay = true;

三、遇到的坑

1. 退出全屏后，页面自动滚动到顶部

搜索发现早在2016年就有人提出这个问题，当时说是Chrome的bug，然而今天Chrome72上面仍然有这个问题。

document.querySelectorAll('video').forEach(function(val,idx,arr){
    let player=videojs(val);
    player.on('fullscreenchange',function(){
        if(!this.isFullscreen()){
            let self=this;
            setTimeout(function(){
                self.dom.scrollIntoView();
            },200);
        }
    })
    player.dom=val;
    players.push(player);
});
文章目录