XuLaLa.Tech

在HTML5页面中播放视频video，如何隐藏显示控件的按钮。

Like this:

    <video width="300" height="200" autoplay="autoplay">  <source src="video/supercoolvideo.mp4" type="video/mp4" /></video>

controls is a boolean attribute:

文章目录

• 1 HTML5 video – show/hide controls programmatically
• 2 如何删除HTML5视频播放器导航按钮
• 3 隐藏视频控件，直到用户悬停在视频上
• 4 我们如何从视频标签中隐藏播放、时间线控制
• 5 html如何删除iframe中视频标记中的控制栏

HTML5 video – show/hide controls programmatically

    <video id="myvideo">
<source src="path/to/movie.mp4" /></video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>

如何删除HTML5视频播放器导航按钮

您可以通过Javascript禁用控件：

    document.getElementById('video-player').controls = false

Or simply remove controls attribute:

    <video id='video-player' autoplay="autoplay" loop preload="metadata">    <source src="Video/1.MP4" type="video/mp4"></video>

隐藏视频控件，直到用户悬停在视频上

我们可以通过jQuery的几行代码实现这一点, making use of .hover():

$('#myvideo').hover(function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls", "controls")
}
}) 

编辑我错误地将变量“video”留在了上面的代码中。我将其更改为“this”，这样您就不必管理获取ID的变量。

    $('#myvideo').hover(function toggleControls() {
if (this.hasAttribute("controls")) {
this.removeAttribute("controls")
} else {
this.setAttribute("controls", "controls")
}})

HTML

    <video width="300" height="auto" id="myvideo">    <source src="#" type="video/mp4" /></video>

Update:
你提到你有几个视频。因此，您可以使用相同的逻辑，只需在“$（）”中添加额外的选择器。下面是一个示例：

    $('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...

这样做会_listen_或等待，直到它检测到您悬停在其中一个ID上。

我们如何从视频标签中隐藏播放、时间线控制

To show video controls:

    <video width="320" height="240" controls>

To hide video controls:

    <video width="320" height="240">

Supported from IE 9 and up.

html如何删除iframe中视频标记中的控制栏

hi just check your video code if there is anycontrols

word like that

    <video src="../videos/test.mp4" autoplay controls></video>

then remove it to be like that

    <video src="../videos/test.mp4" autoplay ></video>