Pause / Play video html5 в popup окне

28 Июня 2016
javascript
    1. Для демонстрации HTML-видео на сайте достаточно следующего кода (подробнее о видео):

      <video preload loop controls width="800" height="400" id="video" >
      	<source src="mov.mp4" type="video/mp4" />
      </video>
      
      • Для того чтобы получить контроль над видео с помощью сторонних кнопок - создаем функции Play и Pause

        function Pause(id){
            document.getElementById(id).pause();
        }
        
        function Play(id){
            document.getElementById(id).play();
        }
        

        и архитектуру кнопок

        <button onClick="Pause('video')">пауза</button>
        <button onClick="Play('video')">плей</button>
        
      • Либо можно объединить функционал в одну кнопку и одну функцию PlayPause

        function PlayPause(id){
        	var mov_ID=document.getElementById(id)
        	if(mov_ID.paused){
        		mov_ID.play(); 
        	}else{
        		mov_ID.pause(); 
        	}
        }
        

        и архитектура кнопки

        <button onClick="PlayPause('video')">Плей/Пауза</button>
        
    1. Чтобы вызвать видео в POPUP окне, воспользуемся функцией Показать / скрыть блок и получим следующий код

      <button onClick="PlayPause('video');ShowHide('block_id');">Плей/Пауза и Показать/Скрыть</button>
      <div id="block_id" style="display:none">
      	<video preload loop controls width="800" height="400" id="video" >
      		<source src="mov.mp4" type="video/mp4" />
      	</video>
      </div>
      
    2. код обеих функций

      function ShowHide(id){
      	var idBlock=document.getElementById(id);
      	var styleBlock=getComputedStyle(idBlock).display;
      	idBlock.style.display=styleBlock==="none"?"block":"none";
      }
      
      function PlayPause(id){
      	var mov_ID=document.getElementById(id)
      	if(mov_ID.paused){
      		mov_ID.play(); 
      	}else{
      		mov_ID.pause(); 
      	}
      }