Categories: JS编程

HTML5 Video // Completely Hide Controls

在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:

注意:布尔值不允许使用值“true”和“false”属性。要表示假值,属性必须为完全省略。

HTML5 video – show/hide controls programmatically

    <video id="myvideo">  
    <source src="path/to/movie.mp4" /></video>
    <p >

如何删除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>
5.0
04
Nginx解决跨域资源问题:No 'Access-Control-Allow-Origin' header is present on the requested resource.
kafka高并发基于什么实现
嘻嘻

嘻嘻IT: 笔者是一个工作七八年的程序猿老鸟,从事涉及的技术栈主要包括PHP、Linux、Devops等,喜欢研究新技术,尝试新技术,提升技术自动化和开发效率,致力于write less,do more! 技术每年都会层出不穷,领域划分的越来越细,不可能学习所有的东西,保持对技术的好奇心,理解技术中核心思想,做一个有深度,有思想的开发!

Recent Posts

Clockwise一款AI日历工具

Clockwise是一款创新的…

16小时 ago

IT Tools一款开发人员的实用开源在线工具(11.5k stars)

IT Tools是一款免费且开…

16小时 ago

Leonardo一个视觉创意AI生成平台

Leonardo.ai提供了一…

17小时 ago

DupDub一款终极AI内容创作助手

DupDub 是一个一站式内容…

17小时 ago

Murf AI是一款尖端的AI声音生成器

Murf AI是一款尖端的AI…

17小时 ago