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

Question

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

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";
        }
    }
}

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

Answer 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";
        }
    }
}