Video.js 踩坑简单入门

90 阅读 0 评论 60 点赞

我是靠谱客的博主健壮纸鹤，最近开发中收集的这篇文章主要介绍Video.js 踩坑简单入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

视频的配置

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

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

写在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()
})