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所做的事情。确保设置了视频播放器的类或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视频循环

1 个答案: