VideoJS 居中播放按钮

Question

我想我会分享一段可能对某人有用的代码。这是一个以 video-js 播放器中的播放按钮为中心的功能，它适用于我。您只需要在暂停事件以及播放器初始化且未自动播放时调用它。

享受吧！

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"
   });
}

Answer 1

你可以尝试在 videojs.com 上玩，或者像上面@misterben 所说的那样：

只需将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;

Answer 2

在之后创建 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;
}

Answer 3

在所有设备（手机和 PC）中，您可以使用以下 css 样式居中对齐播放按钮

.vjs-default-skin .vjs-big-play-button {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%);
            width: 80px!important;
            height: 80px!important;
            -webkit-border-radius: 0.8em!important;
            -moz-border-radius: 0.8em!important;
            border-radius: 1.9em!important;
        }

Answer 4

从"video.js": "^7.7.5" 版本开始，以下配置适用于我： 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>

Answer 5

• Javascript 版本（基于@Adrian 的回答）：

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

• 反应版本：

import { Player, BigPlayButton } from 'video-react'
const MyComponent = () => {
  return (
    <Player className="video-video" >
      <source src={"/video.mp4"} />
      <BigPlayButton position={"center"} />
    </Player>);
}

Answer 6

简单的方法：

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%;
}

Answer 7

在您的代码中添加自定义 CSS

.vjs-big-play-button {
    margin-top: 20%;
    margin-left: 40%;
    width: 70px !important;
    height: 70px !important;
}

相应地调整宽度和高度。

Answer 8

我使用“limelight player”，它使用 video.js 来提供 HTML5 解决方案，但我无法在 iOS 设备中居中播放按钮图标。报告的问题和支持无法与解决方案一起提供。他们确实确认了问题。我想分享我的解决方案，这可能对某人有所帮助。解决方案很简单：减小字体大小！除了“font-size”之外，还有可能需要调整的继承的“line-height”属性。如果父容器未设置为相对或视频播放器容器设置为响应式（宽度：100% ; 高度：100%），则这两个属性会增加父容器并发生错位

所以帮助我的 CSS 解决方案是：

.video-js .vjs-limelight-big-play{ 
      font-size:100px!important /*or less */
}

或者更好地从 PX 切换到 EM，这将有助于移动设备（iOS 也遇到了播放按钮居中的问题）

.video-js .vjs-limelight-big-play{ 
      font-size:10em!important /*or less depending on your design*/
}