我能否以某种方式编辑 HTML5 视频控件以仅在我的视频的右上角显示静音/取消静音按钮?我找到了一种方法,但我选择“显示:无;”在所有其他 id 和按钮的 CSS 中(这不是实现此目的的最佳方式)。此外,它可以工作,但它唯一工作的浏览器是 Chrome。 http://jsfiddle.net/pp6Wn/2/
<div id="video-container">
<video id="my_video" width="100%" height="100%" >
<source src="http://romain-menard.fr/cours_html5/sitedemo/src/small.mp4"
type="video/mp4" />
<source src="video/movie.webm"
type="video/webm" />
</video>
<!-- Video Controls -->
<div id="video_controls_bar">
<button id="playpausebtn"></button>
<span id="curtimetext">00:00</span>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1"><span id="durtimetext">00:00</span>
<button id="mutebtn">Mute</button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<button id="fullscreenbtn"></button>
</div>
</div>
最佳答案
一个解决方案可能是创建另一个按钮,
给它添加一些 CSS,并分配 JS 静音功能:
HTML:
创建一个新按钮并将其放入“video-continer”div,但 out“video_controls_bar”div:
</video>
<button id="mutebtn2">Mute</button>
<!-- Video Controls -->
<div id="video_controls_bar">
JS:
分配静音功能:
在 JS 文件中将这两行添加到“initializePlayer()”函数中:
mutebtn2 = document.getElementById("mutebtn2");
mutebtn2.addEventListener("click",vidmute2,false);
然后添加这个新函数:
function vidmute2(){
if(vid.muted){
vid.muted = false;
mutebtn2.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn2.innerHTML = "Unmute";
}
}
CSS:
添加 css 样式以将新按钮放置在视频右上角:
#mutebtn2 {
position: absolute;
top: 0px;
right: 0px;
}
如果你想隐藏视频控件,在 css 文件中只需更改:
#video-container:hover #video_controls_bar {
opacity: 1;
}
为此:
/* this is just a CSS comment, you can bypass it */
/* #video-container:hover #video_controls_bar {
opacity: 1;
} */
关于jquery - 自定义 HTML5 视频控件 - 仅显示静音按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23838536/