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

【问题标题】：Custom HTML5 video controls - Display mute button only自定义 HTML5 视频控件 - 仅显示静音按钮
【发布时间】：2014-07-13 08:42:21
【问题描述】：

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

【问题讨论】：

标签： jquery css html html5-video

【解决方案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;
} */

【讨论】：

【解决方案2】：

播放视频：

if($("#video")[0].paused==true)
{
$("#video")[0].play();
}

暂停视频：

$("#video")[0].pause();

你可以从这里得到一些细节http://skillrow.com/html5-video-custom-controls-jquery/

【讨论】：

这如何回答这个问题？