Видео HTML5 - программно отображать/скрывать элементы управления

Я ищу способ показать или скрыть управление HTML5 видео по желанию через javascript. Элементы управления в настоящее время видны только тогда, когда видео начинает воспроизводиться.

Есть ли способ сделать это с помощью собственных элементов управления видео?

Я использую браузер google chrome.

Ответ 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/

Ответ 2

CARL LANGE также показал, как скрыться, автовоспроизведение звука в html5 на устройстве iOS. Работает для меня.

В 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;}

Ответ 3

Вот как это сделать:

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

Рабочий пример: https://jsfiddle.net/otnfccgu/2/

Просмотреть все доступные свойства, методы и события здесь: https://www.w3schools.com/TAGs/ref_av_dom.asp