video.js

1、video.js的官方网站：https://videojs.com/

2、简单使用方式：直接在html的head标签中引入video.js和video-js.css

3、如果想让代码在ie8浏览器中运行需要在head标签引入

4、video.js初始化方式：

在

5、video.js默认播放按钮是在界面的左上角的，想要让按钮居中只需要加入vjs-big-play-centered类即可。

class="video-js vjs-big-play-centered"

6、视频加载完成后，自动播放。加入autoplay="autoplay" 后，有些浏览器可能不会自动播放，这是需要加入 muted="muted"，这是因为有些浏览器静音自动播放一定是被允许的。基本代码如下：

7、修改video.js的样式。有时候video.js默认的样式并不能够满足我们的要求，这时候就需要对默认样式进行修改。

我们可以通过修改video.js的某些类选择器来达到目的。

例如：

刚刚已经完成基本操作，用浏览器解析刚刚的代码，视频界面如下：

点击F12，如下图：

点击左上角的选择，选择要修改的部分，例如要修改播放按钮：

这时，可以发现播放按钮是由vjs-control-bar等类控制的，所以只需要修改在head标签中修改对应的样式即可。

修改的代码如下：

修改后，播放器按钮如下图：

仔细观察，新旧两张图可以发现，播放按钮的样式已经改变了。

如果还想改变其他的样式，只需要我们继续修改就可以了。

我对进度样式修改的图片如下：

仔细看一下进度条的样式，是不是有点像爱奇艺的呢?