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

Turn off volume control and mute button in HTML5 video

本文关键字：按钮 音量控制 HTML5 视频 关闭      更新时间：2024-06-07

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

这可以用HTML或CSS完成或切换吗？还是需要一些javascript来实现这一点？

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

这已经奏效了：

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

超级简单：

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

从视频元素中完全删除控件属性。

试试这里：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls.删除"controls"属性，栏将消失。

相关文章：