如何让 togglefullscreen 使用 HTML5 视频？答案

【问题标题】：How to get togglefullscreen to work with HTML5 video?如何让 togglefullscreen 使用 HTML5 视频？
【发布时间】：2017-02-10 13:30:24
【问题描述】：

我创建了一个简单的 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>

【问题讨论】：

全屏支持在播放器中有点问题。试试这个github.com/sindresorhus/screenfull.js 看看是否对你有帮助。
投票结束为 此问题是由无法再重现的问题或简单的印刷错误引起的。
@nomouseisdead：标题中的“正确代码 2017”是什么意思？我想大多数人都会对此感到困惑，你能澄清一下吗？
请停止在标题中添加 [已解决] - 答案已被接受就足够了。此外，标题不应该是喋喋不休，它们应该是一个流畅的陈述或问题，就像我现在提出的那样。

标签： javascript html5-video html5-fullscreen

【解决方案1】：

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

fullscreenbutton = document.getElementByID("fullscreenbutton");

应该是：

fullscreenbutton = document.getElementById("fullscreenbutton");

也许，这就是问题所在。

【讨论】：

这正是问题所在。谢谢！
太棒了。只有一件事，如果您将问题标记为已解决。人们不会进来尝试解决已经解决的问题。
@nomouseisdead 标记它已解决只需点击北斋答案中点数计数器下方的刻度线。