Video.js 踩坑简单入门

注：文中没写的地方，假设已经引入了Video.js库的文件，包括JavaScript和CSS等。

列举一些小白入门Video.js可能遇到的问题

视频的配置

关于视频的配置，如宽高，预加载，未播放时显示的图片，以及播放，声音，进度条等控件/组件的设置。

一般来说有三种方法来设置。

1. 写在video的html标签之中，如

<video id="video1" class="video-js" controls preauto='auto' poster='a.png' width='600px' height: '300px' data-setup='{}'>
       <source src="shipin.mp4" type='video/mp4'> 
video>

2.写在video标签的data-setup属性中,具体就不说了

3.在JS代码中设置

<video id="video" class="video-js">
       <source src="shipin.mp4" type='video/mp4'> 
video>

---

var options = {
    controls: 'control',
    preload: 'auto',
    width: '856',
    height: '508',
};
var player = videojs('video', options)

作用都是一样的。

这里videojs函数可以接受三个参数，第一个是id，第二个就是视频的配置，第三个可选参数是个函数

如

var player = videojs('video', options, function (){
    play.pause()
})

视频控件/组件

videojs自带的视频控件已经足够满足日常需求了，不过有的时候会出现不想要某个控件的时候，甚至是更改控件的顺序

禁用控件

var options = {
    controls: 'control',
    preload: 'none',
    width: '856',
    height: '508',
    controlBar: {
        volumeBar: false,
        playToggle: false
    }
};

更改控件顺序

var options = {
    controls: 'control',
    preload: 'none',
    width: '856',
    height: '508',
    controlBar: {
        children: [
            {
                name: 'playToggle'
            },
            {
                name: 'progressControl'
            },
            {
                name: 'currentTimeDisplay'
            },
            {
                name: 'timeDivider',
            },
            {
                name: 'durationDisplay'
            },
            {
                name: 'volumePanel',
                inline: false,
            },
            {
                name: 'fullscreenToggle'
            },
        ]
    }
};

注：这里控件的顺序就决定了视频中控件的顺序

竖直的音量面板

可以注意到，上方的代码有一个

{
        name: 'volumePanel',
        inline: false,
 }

加上这个inline: false，音量面板就由默认的水平变为数值了

这时候，就能够定制足够强大的视频播放器了，不过有时候我们可能想改UI，这可能就得自己写一些CSS了。

切换视频的source

有时候会碰到需求，一个video标签，需要根据选择进行切换视频源，代码如下。

<video id="video1" class="video-js" poster='a.png'>
       <source src="shipin.mp4" type='video/mp4'> 
video>

---

var options = {
    controls: 'control',
    preload: 'auto',
    width: '856',
    height: '508',
};
var player = videojs('video', options)

//待切换的视频源
var newVideo = 'xxx.mp4'

//事件，模拟需要改变视频源的时机
$('a').click(function () {
    //暂停视频
    player.pause()
    //获取视频节点（也就是video元素）
    //值的注意的是，想通过id或者class获取该节点的时候，要注意video前后渲染的时候id和class改变了
    //请使用渲染后的id或者class
    //比如，这个原来的id是video，渲染后变成了video1_html5_api
    var $video = $('video_html5_api')
    $video.attr('src', newVideo)
    //重载视频
    player.load()
    //开始视频
    player.play()
})

成功！