HTML5 Видео Fullscreen onclick

Может ли кто-нибудь помочь в этом. Мне было предложено настроить свой файл, как показано ниже, чтобы щелкнуть по изображению, запуская полноэкранное видео HTML5, которое не отображается, но я получаю ошибку функции. Нужно ли включать какую-либо библиотеку? Кажется, что он не реконструирует команду requestFullscreen.HTML5 Видео Fullscreen onclick

<body> 
    <div class="slide" id=""> 
     <img src="../root/img/gc_small.png" id="videoPlay" style="margin:200px 0 0 0;"> 
    </div> 

    <video autoplay loop muted controls="false" id="myVideo" style="width:800px;"> 
     <source src="video/portal.mp4" type="video/mp4"> 
    </video> 
</body>

<script type="text/javascript"> 
     $(function() { 
      $('#videoPlay').on('click', function(event) { 
       event.preventDefault(); 
       $('#myVideo').requestFullscreen(); 
      }); 
     }); 

    </script>

источник

2014-12-11 Packy

Я думаю, [все браузеры, которые в настоящее время поддерживают 'requestFullscreen'] (HTTP: //caniuse.com/#feat=fullscreen) требуется префикс поставщика: 'mozRequestFullScreen' и т. д. Также я думаю, что капитализация« FullScreen »и« Fullscreen »может быть непоследовательной. – apsillers

@apsillers Я попробовал '$ ('# myVideo') .exe: dispatchjquery.min.js: 3 r.handle' – Packy

О, право; коллекция jQuery не имеет метода 'webkitRequestFullScreen'. Первый элемент внутри коллекции jQuery ('$ (...) [0]') имеет этот метод. – apsillers

Вы можете использовать этот код, как я использовал этот код работает для меня:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>FullScreen</title> 
     <meta charset="utf-8"> 
     <style></style> 
    </head> 
    <body onLoad="onload();"> 
     <video id="element"> 
      <source src="video1.mp4"></source> 
     </video> 
     <a href="#" id="fullscreen">Go Fullscreen</a> 
     <script> 
      var element = document.getElementById('element'); 
      var fullscreen = document.getElementById('fullscreen'); 

      fullscreen.addEventListener('click',function(){ 
       <!--console.log ('it is working'); --> 
       if(element.requestFullscreen){ 
        element.requestFullscreen(); 
       } 
       else if (element.webkitRequestFullscreen){ 
        element.webkitRequestFullscreen(); 
       } 
       else if (element.mozRequestFullScreen){ 
        element.mozRequestFullScreen(); 
       } 
       else if (element.msRequestFullscreen){ 
        element.msRequestFullscreen(); 
       } 
      }); 
     </script>  
    </body> 
</html>

источник

2017-07-01 09:39:44 Anileweb

HTML5 Видео Fullscreen onclick

ответ

Смежные вопросы