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

Question

我需要使用自定义 png 播放按钮更改中心的大播放按钮 Video 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;
      }
    }