Question

我可以以某种方式编辑HTML5视频控件，只显示静音/取消静音按钮并位于视频的右上角吗？我找到了一种方法，但我选择＆＃34;显示：无;＆＃34;在CSS中用于所有其他ID和按钮（这不是实现此目的的最佳方式）。此外，它可以工作，但它唯一可用的浏览器是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 of“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;
} */

Answer 2

播放视频：

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

暂停视频：

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

您可以从http://skillrow.com/html5-video-custom-controls-jquery/

获取详细信息

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

2 个答案: