VideoJS 居中播放按钮

Posted 2023-05-08

【中文标题】VideoJS 居中播放按钮

【英文标题】：VideoJS centered play button

【发布时间】：2013-12-01 19:30:01

【问题描述】：

我想我会分享一段可能对某人有用的代码。这是一个以 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"
   );

【问题讨论】：

从video.js version 4.3 开始，您只需将vjs-big-play-centered 类添加到视频元素即可。对于早期的 4.x 版本，您可以使用 .vjs-big-play-button left: 50%; top: 50%

这不是问题，真的。您可以重写它并询问如何使按钮居中，然后回答它。或者请@misterben 回答。

互联网祝福你：P

复制：***.com/questions/18426487/…

@misterben 你成就了我的一天！非常感谢

【参考方案1】：

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

只需将vjs-big-play-centered 类添加到视频元素。

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

游乐场：https://codepen.io/heff/pen/EarCt

对于 SCSS 版本，您可以使用

$center-big-play-button: true;

【讨论】：

确实由于 videojs.com 链接已失效。你可以在这里玩：codepen.io/heff/pen/EarCt

【参考方案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;

【讨论】：

盒子位于中间，但播放图标没有很好地缩小

【参考方案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;
        

【参考方案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"
  
  
  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>

【参考方案5】：

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

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

反应版本：

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

【参考方案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%;

【参考方案7】：

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

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

相应地调整宽度和高度。

【参考方案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*/