HTML5 禁用默认控件
Posted
技术标签:
【中文标题】HTML5 禁用默认控件【英文标题】：HTML5 disable default controls 【发布时间】：2012-04-08 21:38:13 【问题描述】：我想知道如何禁用 html5 视频的 Showcontrols 选项。
这是我要禁用的：
我要禁用的原因是，如果我使用自定义控件并且如果鼠标悬停，我需要显示我的自定义控件，当我离开鼠标时它应该隐藏控件，问题是当我选择 ShowControls默认控件显示我不想要的。
谁能建议我如何处理它？
【问题讨论】：
【参考方案1】：var video = document.getElementById("video"); // assuming "video" is your videos' id
video.removeAttribute("controls");
例如：http://jsfiddle.net/dySyv/1/
【讨论】：
+1。只是为了说清楚：不要设置 controls 属性，请参阅dev.w3.org/html5/spec/single-page.html#attr-media-controls @Martin-感谢您的快速回复。这正是我所需要的！ :) @Adriano-太棒了！感谢您的澄清。 我在本地尝试了这段代码，起初它可以工作，但是一旦我用实际视频的路径替换了src="/movie.mp4"，当您右键单击视频时，Show Controls 选项始终存在.例如。 jsfiddle.net/dySyv/136
我认为Show Controls 选项在用户右键单击视频时应该始终可用。我回答的最初问题是如何以编程方式隐藏控件。据我了解，问题不是要阻止Show Controls 在用户右键单击视频时出现。【参考方案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 禁用默认控件的主要内容，如果未能解决你的问题，请参考以下文章