单击文档上的任意位置结束 HTML5 视频循环

Question

我有一个 HTML5 视频，我将其设置为在按下按钮后按给定时间间隔循环播放。

用户应该能够通过在文档中的任意位置单击来退出循环。视频应该暂停。

在我当前的代码中，点击事件只是偶尔注册，或者根本不注册。

HTML:

<body>
    <video src="./example.mp4" width="480" type="video/mp4" controls></video>
    <button>Test</button>
</body>

JS:

$(document).ready(function() {
    var video = document.getElementsByTagName('video')[0];
    var timeStamp = [7, 8];

    video.addEventListener('canplay', execute);

    function execute() {
        video.removeEventListener('canplay', execute);
        $('button').click(function() {
            playVideoInterval(timeStamp[0], timeStamp[1]);
        });

        function playVideoInterval(start, end) {
            video.addEventListener('timeupdate', loop);
            video.currentTime = start;

            document.body.addEventListener('click', endLoop, true);
            video.play();

            function loop() {
                if (this.currentTime >= end) {
                    video.currentTime = start;
                    video.play();
                }
            }

            function endLoop() {
                video.pause();
                document.body.removeEventListener('click', endLoop);
                video.removeEventListener('timeupdate', loop);
                console.log('hi');

            }
        }    
    }
});

Answer 1

JQuery，捕获对文档的任何点击。相当于您在没有 JQuery 的情况下尝试做的事情。请务必为视频播放器设置 class 或 ID，然后与之进行相应的互动。

我使用 event.stopPropagation(); 作为按钮，然后使用文档事件侦听器来暂停。我没有时间完全重做你的代码，重组它。

此示例将在片段中运行。

var video = document.getElementsByTagName('video')[0];
var timeStamp = [7, 8];
var loop = false

function execute() {
    video.removeEventListener('canplay', execute);
    $('button').click(function() {
        playVideoInterval(timeStamp[0], timeStamp[1]);
    });

    function playVideoInterval(start, end) {
        video.addEventListener('timeupdate', loop);
        video.currentTime = start;

        document.body.addEventListener('click', endLoop, true);
        video.play();

        function loop() {
            if (this.currentTime >= end) {
                video.currentTime = start;
                video.play();
            }
        }

        function endLoop() {
            document.body.removeEventListener('click', endLoop);

            video.removeEventListener('timeupdate', loop);

            video.pause();

        }
    }
}

$(".play").on("click", function(event) {
    event.stopPropagation();
    execute()

});

$(document).on("click", function(e) {
    if (!$(e.target).is('.play')) {
        // do something
        video.pause()
    }


});

<!DOCTYPE html> 
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <body>
      <video width="200" id="myVideo" height="150" autoplay controls>
         <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4" />
      </video>
  <button class="play" width="100px" height="100px" style="display:block; width:500px; height:100px;">Test</button>
   </body>
</html>

单击文档上的任意位置结束 HTML5 视频循环

End HTML5 video loop with click anywhere on document

html

javascript

video

events

html5-video