video.js_vjs-icon-CSDN博客

本文链接：https://blog.csdn.net/Willy__QI/article/details/82700252

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

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

<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet">
		<script src="https://vjs.zencdn.net/7.1.0/video.js"></script>
	</head>

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

<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>

4、video.js初始化方式：

在<video>标签加入class="video-js"和data-setup="{}"，二者缺一不可。

       <video id="my-video"
			   class="video-js"
			   controls
			   width="600px"
			   data-setup="{}">
			<source src="video/Sincerely.mp4" type="video/mp4"></source>
		</video>

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

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

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

<video id="my-video"
			   class="video-js vjs-big-play-centered"
			   controls="controls"
			   width="600px"
			   autoplay="autoplay"
			   muted="muted"
			   data-setup="{}">
			<source src="video/Sincerely.mp4" type="video/mp4"></source>
		</video>

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

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

例如：

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

点击F12，如下图：

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

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

修改的代码如下：

<style>
			.video-js .vjs-control-bar{
			    height: 40px;
    			background: rgba(26,26,26,.8);
			}
			
			.video-js .vjs-control-bar .vjs-paused .vjs-icon-placeholder{
				border: 10px dashed transparent;
			    border-left: 15px solid #ababab;
			    display: inline-block;
			    left: 20px;
			    top: 10px;
			    position: absolute;
			}
			
			.video-js .vjs-control-bar .vjs-playing .vjs-icon-placeholder:hover{
				 border-color: #6cc900;
			}
			
			.video-js .vjs-control-bar .vjs-paused .vjs-icon-placeholder:before{
				display: none;
			}
                        //加入该样式，可以将video.js原有的样式消除
		</style>

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