HTML5視頻 - 以編程方式顯示/隱藏控件

Question

我正在尋找一種通過javascript隨意顯示或隱藏HTML5視頻控件的方法。該控件目前僅在視頻開始播放時纔可見

有沒有辦法用原生視頻控件來做到這一點？

我正在使用谷歌Chrome瀏覽器。

Answer 1

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

看到它工作的jsfiddle：http://jsfiddle.net/dgLds/

Answer 2

CARL LANGE還展示瞭如何讓隱藏的，一個iOS設備上自動播放HTML5的音頻。適用於我。

在HTML，

<div id="hideme"> 
    <audio id="audioTag" controls> 
     <source src="/path/to/audio.mp3"> 
    </audio> 
</div> 

與JS

<script type="text/javascript"> 
window.onload = function() { 
    var audioEl = document.getElementById("audioTag"); 
    audioEl.load(); 
    audioEl.play(); 
}; 
</script> 

在CSS中，

#hideme {display: none;} 

Answer 3

這裏是如何做到這一點：

var myVideo = document.getElementById("my-video")  
myVideo.controls = false; 

工作示例： https://jsfiddle.net/otnfccgu/2/

這裏查看所有可用的屬性，方法和事件：https://www.w3schools.com/TAGs/ref_av_dom.asp