Javascript - 视频的播放/暂停按钮答案

【问题标题】：Javascript - Play/ Pause button for videoJavascript - 视频的播放/暂停按钮
【发布时间】：2015-12-02 17:54:04
【问题描述】：

为了我的大学工作，我必须制作视频控件，并且我正在尝试实现一个播放/暂停按钮以开始，但它不起作用。这是我的代码：

HTML：

<script src="Scripts/VideoScript.js"></script>
<section id="Example_Video_Container">
    <video width = 576 height = 432 id = "Example_Video">  
        <source src="Videos/Example_Video.mp4">
        <source src="Videos/Example_Video.webm">
    </video>
    <div id="Example_Video_Controls">
        <button type="button" id="Play_Pause" >Play</button>
    </div>
</section>

JavaScript：

window.addEventListener (“DOMContentLoaded”,handleWindowLoad) 
function handleWindowLoad ()
{
    var Video = document.getElementById ( "Example_Video" );
    var PlayButton = document.getElementById ( "Play_Pause" );
    var MuteButton = document.getElementById ( "Mute_Unmute" );
    var Slider = document.getElementById ( "Slider" );

    PlayButton.addEventListener ( "click", Play_Pause_Video ) ;

    function Play_Pause_Video ()
    {
        if (Video.paused === true)
        {
            Video.play();
            PlayButton.innerHTML = "Pause";
        }
        else
        {
            Video.pause();
            PlayButton.innerHTML = "Play";
        }
    }
}

我也检查了我的文件路径，应该没问题。

【问题讨论】：

html5 video 标签提供了它自己的控件。 <video width = 576 height = 432 id = "Example_Video" controls>
play pause html5 video javascript的可能重复
注意window.addEventListener (“DOMContentLoaded”,handleWindowLoad) 中的“。它不是 javascript 识别的实际 "。将其替换为"。
请看我的回答@Will
谢谢，我试过了，效果也很好，很容易解决谢谢

标签： javascript html

【解决方案1】：

看到这个fiddle

您的代码运行良好。你在浏览器控制台中得到了一个Uncaught SyntaxError: Unexpected token ILLEGAL，这是由于“。

注意 window.addEventListener (“DOMContentLoaded”,handleWindowLoad) 中的 “ 。它不是 javascript 识别的实际 "。将其替换为"。因此 JS 代码就像

window.addEventListener ("DOMContentLoaded",handleWindowLoad);
function handleWindowLoad ()
{
    var Video = document.getElementById ( "Example_Video" );
    var PlayButton = document.getElementById ( "Play_Pause" );
    var MuteButton = document.getElementById ( "Mute_Unmute" );
    var Slider = document.getElementById ( "Slider" );

    PlayButton.addEventListener ( "click", Play_Pause_Video ) ;

    function Play_Pause_Video ()
    {
        if (Video.paused === true)
        {
            Video.play();
            PlayButton.innerHTML = "Pause";
        }
        else
        {
            Video.pause();
            PlayButton.innerHTML = "Play";
        }
    }
}

【讨论】：

【解决方案2】：

检查您的控制台是否有错误。我注意到一个 -

Javascript Error: 'missing ) after argument list"

要解决这个问题，请替换 window.addEventListener()

与：

document.addEventListener("DOMContentLoaded", function(event) {
    handleWindowLoad();
});

【讨论】：

我试过了，没有任何反应，对你有用吗？
哦，当我复制它时它确实有效，非常感谢:)
看我的回答@JordanMcArdle

【解决方案3】：

HTML5 包含视频控件的内置属性。

查看此页面寻求帮助：http://www.w3schools.com/tags/att_video_controls.asp

【讨论】：

我知道我可以在视频标签中添加“控件”，但任务是自己制作

【解决方案4】：

代码在技术上是正确的，应该可以正常工作，但是有一个小错误。

21:17:37.737 SyntaxError: illegal character1 VideoScript.js:1:26

在您的 VideoScript.js 中，第 1 行的第 26 个字符是非法的。

window.addEventListener (“DOMContentLoaded”,handleWindowLoad)

删除这个奇怪的双引号（“”）并用正常的双引号（“”）替换它，它会正常工作:)

window.addEventListener ("DOMContentLoaded",handleWindowLoad)

这就是你应该使用调试工具的原因。

这里有一些提示可以找出类似的小错误：

如果您使用 FireFox，请单击 Ctrl+Shift+J 并打开浏览器控制台窗口；
刷新加载有问题的 HTML 文件的选项卡；
检查浏览器控制台，看看有没有错误；
复制错误并用 Google 搜索。

【讨论】：