如何让 togglefullscreen 与 HTML5 视频一起使用？

Question

我创建了一个简单的 HTML 文件，以便学习如何使用 HTML5 添加视频。我遵循了 youtube 上的旧说明，但无法使解决方案起作用。在我添加全屏之前所有代码都有效

我哪里出错了？我尝试了不同的拼写、大写字母以及来自 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>

Answer 1

在您的 javascript 控制台中查看，您有错字。

fullscreenbutton = document.getElementByID("fullscreenbutton");

应该是：

fullscreenbutton = document.getElementById("fullscreenbutton");

也许，这就是问题所在。

如何让 togglefullscreen 与 HTML5 视频一起使用？

How to get togglefullscreen to work with HTML5 video?

javascript

html5-video

html5-fullscreen