简体   繁体   中英

Autoplay html5 video when another one end just once

I'm pretty sure this is a simple question, but I have no idea how to do it.

$(".options .option1").click(function() {
    var video = $("#video1").get(0);
    video.play();
    return false;
});

$('#video1').bind('ended', function () { 
$('.option-profesional').addClass('open');
setTimeout(function(){
    var video = $("#video2").get(0);
    video.play();
    return false;
}, 4250);

});

And this:

$(".options .option2").click(function() {
    var video = $("#video2").get(0);
    video.play();
    return false;
});

$('#video2').bind('ended', function () { 
$('.option-personal').addClass('open');
setTimeout(function(){
    var video = $("#video1").get(0);
    video.play();
    return false;
}, 4250);

});

So... I start one video "personal or profesional" by clicking a button. When this video ends start the second video and vice versa. Which it's basically a bucle.
What I'm looking for it's to stop that bucle. So when you already watched the first one don't start this one when the second one ends.

For dummys, because I'm pretty bad explaining this:

What I want:

video1 > video2 > END (by showing a text or something.)

video2 > video1 > END (by showing a text or something.)

What it's currently doing my code:

video2 > video1 > video2 > video1 > video2 > video1... and vice versa.

Thank you!

Since your checking with jQuery that if a video is ended by binding (ended), how about you make a Flag, when video2 is completed, change the flag to true and wrap the video playing script inside of an if statement. This way you can show a message or do whatever you like. Repeat for condition 2, video2 > video1> turn it to true when video1 is ended and wrap it inside of an if statement, then compare. Does this help a bit?

So something like this:

video_status = false;

if (video_status == false) {

  $(".options .option1").click(function() {
      var video = $("#personal").get(0);
      video.play();
      return false;
  });

  $('#video1').bind('ended', function () { 
  $('.option-profesional').addClass('open');
  setTimeout(function(){
      var video = $("#profesional").get(0);
      video.play();
      video_status = true; // < This condition should end this run. On refresh or reload the condition resets to false and repeats.
      return false;
  }, 4250);

  });

}

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM