关闭HTML5视频中的音量控制和静音按钮 [英] Turn off volume control and mute button in HTML5 video

问题描述

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

We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.

这可以用HTML或CSS完成或切换吗？或者是否需要一些javascript？

Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?

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

At the moment the setting within our html tag is just: controls="controls"

推荐答案

超级简单：

你的html应该是这样的：

Your html should be something like:

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

然后添加一个自定义按钮来播放视频：

Add then a customized button to play the video:

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

最后一个进度条：

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

然后在javascript中添加一个按钮来播放

Then in javascript add a button to play

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

function vidplay() {

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

还有一个更新进度条的监听器：

And a listener to update the progress bar:

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'; 
}

所以基本上删除标准控制和创造你自己的。

So basically remove the "standard controls" and create your own ones.

如果你想获得更复杂的结果，我建议你另外一个选择。这可能是使用更可配置的设置，例如 video.js 。

If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js.

这篇关于关闭HTML5视频中的音量控制和静音按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！