Question

我想知道如何禁用HTML5视频的Showcontrols选项。

这是我要禁用的内容：

我想要禁用的原因是，如果我使用自定义控件，如果我鼠标悬停我需要显示我的自定义控件，当我离开鼠标时，它应该隐藏控件，问题是当我选择ShowControls时默认控件显示我不想要的。

有谁能建议我如何处理？

enter image description here

Answer 1

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

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

Answer 2

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>

视频控制隐藏在这里，为了不让我添加oncontextmenu="return false;"的用户打开它。视频的上下文菜单现在不显示。所以用户无法打开它。

（您可以添加自定义上下文菜单，还可以为播放/暂停，寻求，显示时间以及<创建自定义控件em>使用javascript更改音量。）

希望它有帮助...：）

HTML5禁用默认控件

2 个答案: