我想我应该分享一段代码,这段代码可能对某些人有用。这是一个功能,中心的播放按钮内的视频-js播放器,它对我的工作。你只需要在pause事件上调用它,当播放器被初始化并且没有被自动播放时。
享受吧!
function CenterPlayBT() {
var playBT = $(".vjs-big-play-button");
playBT.css({
left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
});
}
发布于 2016-04-26 00:20:28
在以下位置创建video-js-custom.css位置:
<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">
添加video-js-custom.css:
.video-js .vjs-big-play-button {
left: 40% !important;
top: 40% !important;
width: 20%;
height: 20%;
}
.video-js .vjs-play-control:before {
top:20% !important;
content: '\f101';
font-size: 48px;
}
发布于 2020-05-04 12:49:41
在"video.js": "^7.7.5"
版本中,以下配置对我有效: class vjs-big-play-centered
将按钮放在播放器的中心。
样式表
<link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />
<!-- City -->
<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">
HTML
<video
id="my-video"
class="video-js vjs-theme-city vjs-big-play-centered"
controls
playsinline
preload="auto"
width="640"
height="480"
data-setup="{}"
>
<source src="{{this.url}}" type="application/x-mpegURL"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
发布于 2015-04-23 17:03:47
简单的方法:
http://designer.videojs.com -在less的底部只需添加:
.vjs-default-skin .vjs-big-play-button {
margin-left: -@big-play-width/2;
margin-top: -@big-play-height/2;
left: 50%;
top: 50%;
}
https://stackoverflow.com/questions/20051332
复制相似问题