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

时间:2015-12-02 17:54:04

标签: javascript html

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

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

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

4 个答案:

答案 0 :(得分:2)

请参阅此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";
        }
    }
}

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

Javascript Error: 'missing ) after argument list"

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

使用:

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

答案 3 :(得分:0)

代码在技术上是正确的,它应该可以正常工作,但有一点点错误。

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

在你的VideoScript.js中,第26行在第1行是非法的。

window.addEventListener (“DOMContentLoaded”,handleWindowLoad) 

删除这个奇怪的双引号(“”)并将其替换为普通的(&#34;&#34; ),它会正常工作:)< / p>

window.addEventListener ("DOMContentLoaded",handleWindowLoad)

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

以下是一些提示,可以找出类似的小错误:

  • 如果您使用FireFox,请单击Ctrl + Shift + J并打开浏览器控制台窗口;
  • 刷新加载有问题的HTML文件的标签;
  • 检查浏览器控制台,您将看到是否有任何错误;
  • 复制错误和谷歌。