首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >VideoJS居中播放按钮

VideoJS居中播放按钮
EN

Stack Overflow用户
提问于 2013-11-18 23:21:04
回答 5查看 51.1K关注 0票数 39

我想我应该分享一段代码,这段代码可能对某些人有用。这是一个功能,中心的播放按钮内的视频-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"
   });
}
EN

回答 5

Stack Overflow用户

发布于 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;
}
票数 1
EN

Stack Overflow用户

发布于 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>
票数 1
EN

Stack Overflow用户

发布于 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%;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20051332

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档