HTML5视频 - 以编程方式显示/隐藏控件 [英] HTML5 video - show/hide controls programmatically

问题描述

我正在寻找一种通过javascript来随意显示或隐藏HTML5视频控件的方法。这些控件目前仅在视频开始播放时才可见

有没有一种方法可以用原生视频控件来做到这一点？

我使用google chrome浏览器。

解决方案

< video ID = MyVideo网站 >
< source src =path / to / movie.mp4/>
< / video>

< p onclick =toggleControls（）;>切换< / p>

< script>
var video = document.getElementById（myvideo）;
$ b $ function toggleControls（）{
if（video.hasAttribute（controls））{
video.removeAttribute（controls）
} else {
video.setAttribute（controls，controls）
}
}
< / script>


查看它在jsFiddle上的工作情况： http://jsfiddle.net/dgLds/

I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play

Is there a way to do this with the native video controls?

I'm using google chrome browser.

解决方案

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

See it working on jsFiddle: http://jsfiddle.net/dgLds/

这篇关于HTML5视频 - 以编程方式显示/隐藏控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！