将播放图标替换为自定义图片，视频js

Question

我需要使用自定义png播放按钮更改中心的大播放按钮，视频js。我怎样才能做到这一点。我没有在videojs css中找到任何样式。它是从字体

定义的

Answer 1

它是通过CSS定义的。视频组件上有一个类，名为.vjs-big-play-button。您可以在此处定义新的背景图像。请务必查看此类的：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;
}