代码之家 › 专栏 › 技术社区 › brienna

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

html5-video video events html5 javascript

brienna · 技术社区 · 6 年前

我有一个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');

            }
        }    
    }
});

1 回复 | 直到 6 年前

ABC 6 年前

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>