HTML5 视频事件监听器不工作答案

【问题标题】：HTML5 Video Event Listeners not workingHTML5 视频事件监听器不工作
【发布时间】：2018-02-20 22:33:46
【问题描述】：

我正在尝试向我的视频播放器添加一个“结束”和“时间更新”事件侦听器，但由于某种原因它不起作用：

//File: watch.php
//Folder Layout:
//root
//   watch.php
//   js/
//      jquery-3.3.1.min.js
//      bootstrap.min.js
//   cs/
//      bootstrap.min.css
//      style.css

<html>

<head>
    <?php
    $video_link = "first_video.mp4";
    ?>

    <title>Watch Video</title>

    <!-- STYLESHEETS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <?php echo "<video id='video_player' src='$video_link' controls autoplay onclick='this.paused ? this.play() : this.pause();' oncontextmenu='return false;'>Browser doesn't support HTML5 Video!</video>"; ?>

    <!-- SCRIPTS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        var video = document.getElementById('video_player');

        function Ended() 
        {
            alert("Ended!");
            $('#video_player').attr('src', 'second_video.mp4');
            video.load();
            video.play();
        };

        function TimeUpdate()
        {
            if(video.currentTime > (1 * 60))
                alert("1min passed...");
        };

        video.addEventListener('ended', Ended);
        video.addEventListener('timeupdate', TimeUpdate);
    </script>
</body>

</html>

如果有人可以向我解释为什么它不起作用，那就太好了。任何帮助是极大的赞赏。提前致谢！

【问题讨论】：

标签： javascript jquery html html5-video

【解决方案1】：

您有一些语法错误。关闭 TimeUpdate 和 Ended 函数后需要去掉括号。

function Ended() 
    {
        alert("Ended!");
        video.source = "second_video.mp4";
        video.load();
        video.play();
    })<--- remove this;

【讨论】：

抱歉，您需要更改 jquery 以使第二个视频也正确加载。应该读起来更像。 $('#video_player').attr('src', 'second_video.mp4');
是的，我在我的 OP 中更新了这两个东西，但遗憾的是它仍然不起作用。
就像 Karl 在小提琴中展示的那样，建议的代码应该可以工作。我会在控制台中查找某种语法错误（chrome 中的 f12），还要检查并确保您的导入指向您的 css 和 javascript 位置的正确位置。我知道根据环境，有时我必须在位置前加上 ./ 可能会发生类似的事情？如果您可以发布更改后控制台显示的内容，也许我们可以提供更多帮助。

【解决方案2】：

我已经更新了您的 Ended 和 TimeUpdate 函数。

    function Ended() 
    {
        alert("Ended!");
        video.source = "second_video.mp4";
        video.load();
        video.play();
    };

    function TimeUpdate()
    {
        if(video.currentTime > (1 * 60))
            alert("1min passed...");
    };

您的原始代码在两个函数的末尾都包含一个不必要的右括号。工作代码的 Codepen：https://codepen.io/anon/pen/zRWRyQ?editors=1111

【讨论】：

删除它们并更新了 OP，但它仍然不起作用：/