End HTML5 video loop with click anywhere on document
Question
I have a HTML5 video that I set to loop over a given interval, upon the push of a button.
The user should be able to exit the loop with a click anywhere in the document. The video should pause.
With my current code the click event registers only sporadically, or not at all.
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 answers
solution1
0 ACCPTED 2018-10-03 15:03:57
JQuery, capture any click on document. Equivalent of what you were trying to do without JQuery. Make sure you set the class or id for the video player, then interact with it accordingly.
I used event.stopPropagation(); for the button, and then a document event listener for the pause. I didn't have time to completely redo your code, restructure it.
This example will work in snippet.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.