用自定义图像替换播放图标，视频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