关闭 HTML5 视频中的音量控制和静音按钮

Question

我们有一些视频在我们的 HTML 移动应用程序中播放效果很好。但是，我们的视频没有声音，只有字幕，所以我们需要移除音量滑块和静音按钮，但保留计时器栏。

这可以用 HTML 或 CSS 完成或切换吗？或者是否需要一些 javascript 来执行此操作？

目前我们的 html 标签中的设置只是： controls=“controls”

原文由 me9867 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

超级简单：

你的 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 。

原文由 LoreV 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这有效：

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

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

原文由 me9867 发布，翻译遵循 CC BY-SA 3.0 许可协议