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的某些类选择器来达到目的。

例如:

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

video.js_第1张图片

点击F12,如下图:

video.js_第2张图片

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

video.js_第3张图片

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

修改的代码如下:

修改后,播放器按钮如下图:

video.js_第4张图片

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

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

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

video.js_第5张图片

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

你可能感兴趣的:(video.js)