Question

我以为我会分享一段可能会派上用场的代码。这是一个以视频-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上面说的那样：＆＃34;只需将vjs-big-play-centered类添加到视频元素＆＃34;

<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

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 4

简单方法：

http://designer.videojs.com - 在不太简单的底部添加：

.vjs-default-skin .vjs-big-play-button {
  margin-left: -@big-play-width/2;
  margin-top: -@big-play-height/2;
  left: 50%;
  top: 50%;
}

Answer 5

为代码添加自定义CSS

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

相应地调整宽度和高度。

Answer 6

我使用＆＃34; limelight player＆＃34;使用video.js提供HTML5解决方案，但我有问题在iOS设备中居中播放按钮图标。报告的问题和支持无法提供解决方案。他们确实证实了问题。我想分享可能对某人有帮助的解决方案。解决方案很简单：减小字体大小！除了＆＃34; font-size＆＃34;有继承的＆＃34; line-height＆＃34;可能需要调整的财产。如果父容器未设置为相对容器或视频播放器容器设置为响应（宽度：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*/
}

Answer 7

在所有设备（手机和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 8

从"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>

VideoJS居中播放按钮

8 个答案: