2012-03-24 90 views
4

我想知道如何禁用HTML5視頻的Showcontrols選項。HTML5禁用默認控件

這是我想禁用的內容:

我想禁用的原因是,如果我用我的自定義控件和如果我將鼠標懸停我需要證明我的自定義控件,當我離開鼠標它應該隱藏控件和問題是,當我選擇ShowControls的默認控件顯示了我不想要的。

任何人都可以建議我如何處理?

enter image description here

回答

10
var video = document.getElementById("video"); // assuming "video" is your videos' id 
video.removeAttribute("controls"); 

例如:http://jsfiddle.net/dySyv/1/

+0

+1。只是要說清楚:不要設置** controls **屬性,請參閱http://dev.w3.org/html5/spec/single-page.html#attr-media-controls – 2012-03-24 18:30:53

+0

@ Martin-Thanks for the快速回復。而這正是我需要的! :) – coder 2012-03-24 18:34:31

+0

@ Adriano-Great!感謝您的澄清。 – coder 2012-03-24 18:35:15

0

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

 
function playPause() { 
 
    if (myVideo.paused) 
 
     myVideo.play(); 
 
    else 
 
     myVideo.pause(); 
 
}
<body> 
 
<video id="video" oncontextmenu="return false;" > 
 
    <source src="https://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm" /> 
 
</video> 
 
<br> 
 
<button onclick="playPause()">Play/Pause</button> 
 
</body>

視頻CONTROLES在這裏隱藏和不被用戶打開它,我加入oncontextmenu="return false;" .Context菜單視頻現在不顯示,所以用戶無法打開它。

(您可以添加自定義的快捷菜單,還可以創建自定義的控件播放/使用JavaScript暫停尋求,以表演時間同時也量變化

希望它可以幫助... :)