jquery - 自定义 HTML5 视频控件 - 仅显示静音按钮

Question

我能否以某种方式编辑 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>

Answer 1

一个解决方案可能是创建另一个按钮，
给它添加一些 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;
} */

---