videojs使用技巧
2021-06-28 21:05
标签：str 动作 eoj name blank get 修改 inner on() videojs网上有很多，可以直接百度下载就行，引用他的css,js，在页面中使用video，下面的css修改可以在video.js里面直接改 1.初始化 Videojs初始化有两种方式。 一种是在 注意，两者缺一不可。 我刚开始的时候觉得后面的值为空对象 另外一种方法是通过JS初始化，格式： 这样有个要求，就是不能配置 当然，如果不想一个个初始化，可以这样来： videojs默认的播放按钮在左上角，是作者认为会遮挡内容考虑的。 不过这是可以通过参数修改的，在 像这样： videojs 4.9开始支持 但是上面的播放框还是一直在的，配置方式和 很多人给出的方法是，在 注意，在iOS10之前用的是 videojs在未播放时，会显示一个大的播放按钮，上面我们提到如何让他居中。 那么，如何在视频暂停时也显示这个播放按钮呢？ videojs默认的播放按钮是圆角矩形，但是一般我们更熟悉圆形的播放按钮。 因为原来居中的时候宽度和高度改变了，所以 这个是视频播放的时候用得较多的功能，解决方法如下。 总有那么一些情形，我们需要重新载入视频文件。 比如，马上播放刚上传的文件。 例如这样的标签： 那通过JS方式就可以这样实现： 或者： videojs使用技巧 标签：str 动作 eoj name blank get 修改 inner on() 原文地址：http://www.cnblogs.com/SunShineM/p/7142194.html1.1 标签方式
标签里面加上class="video-js"和data-setup=‘{}‘属性。{}，不放也行，导致播放器加载不出来，后来加上来就可以了。1.2 JS方式
var player = videojs(‘my-player‘);
data-setup，并且需要传入的id。(function(){
var videos = document.getElementsByTagName(‘video‘);
for(i=0; ivideos.length; i++) {
var video = videos[i];
if(video.className.indexOf(‘video-js‘) > -1) {
videojs(video.id).ready(function(){
});
}
}
})();
2 播放按钮居中
标签中加入vjs-big-play-centered类，就可以了。class="video-js vjs-big-play-centered"
3 支持音乐标签
标签，支持的方式就是，播放的时候封面不会消失。标签一样，也必须要配置data-setup参数。4 禁止在iPhone safari中自动全屏
标签中加入playsinline参数，如下video playsinline >video>
webkit-playsinline。5 暂停时显示播放按钮
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
6 播放按钮变○圆形
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
margin的值也要相应改变7 点击屏幕切换播放/暂停
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}
pointer-events是CSS的一个属性，用来控制鼠标的动作，具体可参考《CSS里的pointer-events属性》。8 重载视频文件
video id="example_video">
source id="videoMP4" src="1.mp4" />
video>
button id="reload">重载button>
var video = document.getElementById(‘example_video‘);
var source = document.getElementById(‘videoMP4‘);
$("#reload").click(function() {
video.pause()
source.setAttribute(‘src‘, ‘2.mp4‘);
video.load();
video.play();
});
var video = document.getElementById(‘example_video‘);
$("#reload").click(function() {
video.pause()
video.setAttribute(‘src‘, ‘2.mp4‘);
video.load();
video.play();
});