用自定義圖像替換播放圖標，視頻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