Как получить togglefullscreen для работы с видео HTML5?

-1

Я создал простой HTML-файл, чтобы узнать, как добавлять видео с помощью HTML5. Я следовал старой инструкции на youtube, но я не мог заставить решение работать. Весь код работал до тех пор, пока я не добавил полноэкранный режимКак получить togglefullscreen для работы с видео HTML5?

Где я ошибался? Я пробовал разные орфографические, заглавные буквы с предложениями на сайте Mozilla, этим форумом и любым другим лучшим результатом, на который могут ссылаться поисковые системы.

Вот код Сейчас

<html> 
    <head> 
     <style type ="text/css"> 
      div#video_box{width:600px; background:black; margin:0px auto;} 
      div#video_control{ background:black; padding:10px; opacity:50%;} 
      input#soundslider{ width:80px} 
     </style> 

     <script> 
      var vid, playbutton, seekbar, seekslider, curtimetext, durtimetext, soundslider, fullscreenbutton; 

      function initializePlayer() { 
       vid = document.getElementById("mi_vid"); 
        playbutton = document.getElementById("playpausebutton"); 
        seekslider = document.getElementById("seekslider"); 
        curtimetext = document.getElementById("curtimetext"); 
        durtimetext = document.getElementById("durtimetext"); 
        soundslider = document.getElementById("soundslider"); 
        fullscreenbutton = document.getElementByID("fullscreenbutton"); 
        // event listeners 
        playbutton.addEventListener("click",playPause,false); 
        seekslider.addEventListener("change",vidSeek,false); 
        vid.addEventListener("timeupdate",seektimeupdate,false); 
        soundslider.addEventListener("change",setvolume,false); 
        fullscreenbutton.addEventListener("click",toggleFullScreen,false); 
       } 

       window.onload= initializePlayer; 


       function playPause() { 
        if(vid.paused){ 
         vid.play(); 
         playbutton.innerHTML = "Pause"; 
        } 
        else { 
         vid.pause(); 
         playbutton.innerHTML = "Play"; 
        } 
       } 

       function vidSeek() { 
        var seekto = vid.duration * (seekslider.value/100); 
        vid.currentTime = seekto; 
       } 
       function seektimeupdate() { 
        var nt = vid.currentTime * (100 /vid.duration); 
        seekslider.value = nt; 

        var curmins = Math.floor(vid.currentTime /60); 
        var cursecs = Math.floor(vid.currentTime - curmins *60); 
        var durmins = Math.floor(vid.duration /60); 
        var dursecs = Math.round(vid.duration - durmins *60); 
        if(cursecs <10) { 
         cursecs = "0"+cursecs; 
        } 
        if(dursecs <10) { 
         dursecs = "0"+dursecs; 
        } 
        curtimetext.innerHTML = curmins+":"+cursecs; 
        durtimetext.innerHTML = durmins+":"+dursecs; 
       } 
       function setvolume() { 
        vid.volume = soundslider.value /100; 
       } 

       function toggleFullScreen() { 
        if (vid.requestFullScreen){ 
         vid.requestFullscreen(); 
        } 
        else if (vid.mozRequestFullScreen) { 
         vid.mozRequestFullScreen(); 
        } 
        else if (vid.mozRequestFullScreen) { 
         vid.mozRequestFullscreen(); 
        } 
        else if (vid.webkitRequestFullscreen) { 
         vid.webkitRequestFullscreen(); 
        } 
        else if (vid.msRequestFullscreen) { 
        vid.msRequestFullscreen(); 
        } 
       } 
      </script> 
    </head> 
    <body> 
     <div id="video_box"> 
      <video id="mi_vid" controls="controls" width="600" height="370"><source src="/home/nomouseisdead/video.mp4"> 
      </video> 
      <div id="video_control"> 
       <button id="playpausebutton">Pause</button> 
       <button id="fullscreenbutton">full</button> 
       <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> 
       <span id="curtimetext"></span>/<span id="durtimetext"></span> 
       <input id="soundslider" type="range" min="0" max="100" value="100" step="1"> 

      </div> 
     </div> 
    </body> 
</html>

источник

2017-02-10 nomouseisdead

Полноэкранная поддержка немного искажает игроков. Попробуйте https://github.com/sindresorhus/screenfull.js и посмотрите, поможет ли это вам. –

Проголосовало за закрытие как _ Этот вопрос был вызван проблемой, которая больше не может быть воспроизведена или простой типографской ошибкой. – halfer

@nomouseisdead: что означает «правильный код 2017» в названии? Я думаю, что большинство людей будет смущено этим, вы можете уточнить? – halfer

Посмотрите в консоли JavaScript, у вас есть опечатка.

fullscreenbutton = document.getElementByID("fullscreenbutton");

должно быть:

fullscreenbutton = document.getElementById("fullscreenbutton");

Может быть, это проблема.

источник

2017-02-10 13:44:35 Hokusai

Это была проблема. Спасибо! – nomouseisdead

Отлично. Только одно, если вы отметите вопрос как решенный. Люди не придут, чтобы попытаться решить вопрос, который уже разрешен. – Hokusai

@nomouseisdead, чтобы пометить его, решил просто нажать на отметку ниже точки счетчика в ответе хокусай. – K3N

Как получить togglefullscreen для работы с видео HTML5?

ответ

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