隐藏HTML5视频控制

-1

我尝试实现显示和隐藏视频元素按钮隐藏HTML5视频控制

这里是我的两个靠岸播放/暂停按钮/重启

<div class="rightContent"> 
       <p class="center">Video Control Options</p> 
       <p class="videoControls"> <input type="button" value="  Play  " onclick="video.play()"/> </p> 
       <p class="videoControls"> <input type="button" value="  Pause  " onclick="video.pause();" /> </p> 
       <p class="videoControls"> <input type="button" value=" Restart  " onclick="video.currentTime =0;"/> </p> 
       <p class="videoControls"> <input type="button" value=" Show Controls " onclick="Show()"/> </p> 
       <p class="videoControls"> <input type="button" value=" Hide Controls " /> </p> 
      </div>

我的JavaScript函数来试图隐藏控制当前：

function hide(){ 
          videoControls.setAttribute = ('style', 'display:none;') 

        }

但是，这是行不通的。

来源

2015-04-04 Andrew Barsoom

使用'videoControls.setAttribute（ '风格'， '显示：无;'）;' – 2015-04-04 18:03:58

将视频元素放入一个变量，如myVideo。

例如：var myVideo = document.getElementById('myVideo')

然后：

function hide(){ 
     video.removeAttribute('controls'); 
    }

下面是一个片段显示它在行动：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<video id="myVideo" width="250" controls> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
</video> 
 

 
    <br> 
 
    
 
<button onclick="hide()">Hide Controls</button> 
 
<button onclick="show()">Show Controls</button> 
 
    
 
<script> 
 
    var myVideo = document.getElementById('myVideo'); 
 

 
    function hide(){ 
 
    myVideo.removeAttribute('controls'); 
 
    } 
 

 
    function show(){ 
 
    myVideo.setAttribute('controls', ''); 
 
    } 
 
</script> 
 

 
</body> 
 
</html>

来源

2015-04-04 18:04:49

这将为内置控件，而不是自定义控件工作。 – 2015-04-04 18:18:41

你的代码示例是不完整的，但是这是我认为是偶然的ng：您正在尝试拨打NodeList上的setAttribute，这不是NodeList的方法。

// this is a node list, not a single node! 
var videoControls = document.querySelectorAll(".videoControls"); 

// convert nodelist to array 
var vcArray = Array.prototype.slice.call(videoControls); 

// iterate over controls and hide each one. 
vcArray.forEach(function(control){ 
    control.style.display = "none"; 
});

来源

2015-04-04 18:20:46

隐藏HTML5视频控制

回答

相关问题