HTML5 비디오와 함께 작동하도록 togglefullscreen을 얻는 방법?

-1

HTML5로 동영상을 추가하는 방법을 배우기 위해 간단한 HTML 파일을 만들었습니다. 나는 youtube에 오래된 지시를 따랐다 그러나 나는 일할 해결책을 얻을 수 없었다. 전체 코드를 추가 할 때까지 모든 코드가 작동했습니다.HTML5 비디오와 함께 작동하도록 togglefullscreen을 얻는 방법?

어디서 오류가 있었습니까? 필자는 다른 철자법, 모질라 사이트에서 제안한 대문자,이 포럼 및 검색 엔진이 가리킬 수있는 다른 최고의 결과를 시도했습니다. 여기

지금

<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 : 제목에서 "correct code 2017"은 무엇을 의미합니까? 나는 대부분의 사람들이 그것에 대해 혼란스러워 할 것이라고 생각한다. – halfer

이 자바 스크립트 콘솔에 표시되는 코드, 당신은 오타가 있습니다.

fullscreenbutton = document.getElementByID("fullscreenbutton");

은 다음과 같아야합니다

fullscreenbutton = document.getElementById("fullscreenbutton");

아마, 그게 문제입니다.

출처

2017-02-10 13:44:35 Hokusai

그건 정확히 문제였습니다. 고맙습니다! – nomouseisdead

좋아요. 문제를 해결 된 것으로 표시하는 경우 한 가지만 더 있습니다. 사람들은 이미 해결 된 질문을 풀려고 오지 않을 것입니다. – Hokusai

@nomouseisdead는 그것을 해결하기 위해 hokusai의 답변에서 포인트 카운터 아래의 체크 마크를 누르기 만하면됩니다. – K3N

HTML5 비디오와 함께 작동하도록 togglefullscreen을 얻는 방법?

답변

관련 문제