關閉 HTML5 視頻中的音量控制和靜音按鈕

Question

我們有一些視頻在我們的 HTML 移動應用程序中播放效果很好。 但是，我們的視頻沒有聲音，只有字幕，所以我們需要移除音量滑塊和靜音按鈕，但保留計時器欄。

這可以用 HTML 或 CSS 完成或切換嗎？ 或者是否需要一些 javascript 來執行此操作？

目前我們的 html 標簽中的設置只是： controls="controls"<\/em>

Answer 1

這已經起作用了：

video::-webkit-media-controls-volume-slider {
display:none;
}

video::-webkit-media-controls-mute-button {
display:none;
}

Answer 2

超級簡單：

您的html應該是這樣的：

<video id="Video1">
  <source src="..." type="video/mp4">
  <source src="..." type="video/ogg">
  Your browser does not support HTML5 video.
</video>

然后添加一個自定義按鈕來播放視頻：

<button id="play" onclick="vidplay()">&gt;</button>

最后是進度條：

<progress id="progressbar" value="0" max="100"></progress>

然后在javascript中添加一個按鈕來播放

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

還有一個監聽器來更新進度條：

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

因此，基本上刪除 “標准控件”並創建自己的控件。

如果您想獲得更復雜的結果，我建議您使用另一種選擇。 這可能使用了更可配置的設置，例如video.js 。

Answer 3

這是視頻的偽元素列表：

視頻::-webkit-media-controls-panel

視頻::-webkit-media-controls-play-button

視頻::-webkit-media-controls-volume-slider-container

視頻::-webkit-media-controls-volume-slider

視頻::-webkit-media-controls-mute-button

視頻::-webkit-media-controls-timeline

視頻::-webkit-media-controls-current-time-display

視頻::-webkit-full-page-media::-webkit-media-controls-panel

視頻::-webkit-media-controls-timeline-container

視頻::-webkit-media-controls-time-remaining-display

視頻::-webkit-media-controls-seek-back-button

視頻::-webkit-media-controls-seek-forward-button

視頻::-webkit-media-controls-fullscreen-button

視頻::-webkit-media-controls-rewind-button

視頻::-webkit-media-controls-return-to-realtime-button

視頻::-webkit-media-controls-toggle-closed-captions-button

在這個參考中，還有音頻、收音機和幾個輸入的偽元素。參考：參考

Answer 4

從視頻元素中完全刪除控件屬性。

在這里嘗試： http : //www.w3schools.com/tags/tryit.asp ?filename= tryhtml5_video_controls 。 刪除“控件”屬性，該條將消失。