VideoJS居中播放按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (4)
  • 关注 (0)
  • 查看 (1861)

这是一个函数,该中心的VideoJS播放器内的播放按钮,它适用于我。我只需在暂停事件中以及初始化并且未被自动播放时调用。

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"
   });
}
提问于
用户回答回答于

你可以在videojs.com或将vjs-big-play-centered类添加到视频元素中

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

https : //codepen.io/heff/pen/EarCt

对于SCSS版本,可以使用

$center-big-play-button: true;
用户回答回答于

也可以margin:auto; top:0;bottom:0;left:0;right:0;这样就可以上下左右居中了

用户回答回答于

为什么最新谷歌浏览器对video播放按钮设置居中无效呢?

用户回答回答于

创建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">

添加视频-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;
}

所属标签

可能回答问题的人

  • 最爱开车啦

    8 粉丝503 提问6 回答
  • 优惠活动秘书

    0 粉丝2 提问6 回答
  • uncle_light

    5 粉丝518 提问5 回答
  • Richel

    6 粉丝0 提问5 回答

扫码关注云+社区

领取腾讯云代金券