用自定义图像、视频 js 替换播放图标

Question

我需要将中间的大播放按钮 Video js 更改为自定义 png 播放按钮。我怎样才能做到这一点。我没有在 videojs css 中找到任何样式。是从font

定义的吗

Answer 1

它是通过CSS定义的。视频组件上有一个class，叫做.vjs-big-play-button。您可以在此处定义新的背景图像。请务必查看此 class 的 :before 和 :hover 属性。

这是我为处理移动和桌面视频播放按钮而设置的代码示例：

    .vjs-big-play-button {
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('myimage.png');
      background-repeat: no-repeat;
      background-size: 46px;
      background-position: 50% calc(50% - 10px);
      border: none !important; // @stylint ignore
      box-shadow: none !important; // @stylint ignore
      &:before {
        content: "";
        display: none;
      }
      &:hover {
        background-color: transparent;
        opacity: .7;
      }
    }

Answer 2

var settingsIcon = document.querySelector('.vjs-play-control .vjs-button-icon');
if (settingsIcon != null ) {
      settingsIcon.removeChild(settingsIcon.firstChild);
      settingsIcon.className += 'your_icon_class_here';
}

您也可以使用他们的定制器https://codepen.io/heff/pen/EarCt

Answer 3

对于 videojs 7，我可以使用以下代码更改大播放图标：

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
   content: "";
   background-image: url('https://pngimage.net/wp-content/uploads/2018/06/svt-png-9.png');
   background-repeat: no-repeat;
   background-size: 46px;
   background-position: 55% calc(50% - 0px);
   border: none !important;
   box-shadow: none !important;
}

用自定义图像、视频 js 替换播放图标

Replace play icon with custom image, video js

video.js