2015-04-04 3 views
-1

им пытаются реализовать шоу и скрыть кнопку видео элементСкрытие HTML5 Video Controls

Вот мои две кнопки сбоку Воспроизведение/пауза/Перезапуск

<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;') 

        } 

однако, это не работает.

+0

использование 'videoControls.setAttribute ('стиль', 'дисплей: нет;');' –

ответ

0

Поместите видеоэлемент в переменную, такую ​​как 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>

+1

Это будет работать для встроенных элементов управления, но не пользовательских элементов управления. –

0

Ваш пример кода является неполным, но это это то, что я думаю, случается ng: вы пытаетесь позвонить setAttribute по телефону NodeList, который не является методом 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"; 
});