I want to play next video automatically after current video is over

Question

I have several videos on my page I want to play the next video automatically if the current video is over.

My code:

<div class="container-fluid">
   <br><br><br><br>
   <div class="row">
      <div class="col-sm-7 bannervideo">
        <iframe oncontextmenu="return false" class="video_container"src="<?php echo $videoDetail[0]['video_links'];?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe> 
         <h1  id="v_title" class="vc_custom_heading dividefirstline"><?php echo $videoDetail[0]['course_title']?>
         </h1>
         <p  id="v_dsc" class="secondline desc"><?php echo substr($videoDetail[0]['video_description'],0,100);?></p>
      </div>
      <div class="col-4 bannervideo">
         <b>Up next</b>
         <?php
            $objDateNow = new DateTime();
            $objDateNow->setTimezone(new DateTimeZone('Asia/Kolkata'));
             foreach ($videoDetail as $vDetail) :
                $objDateStart = DateTime::createFromFormat('Y-m-d', $vDetail['start_date']);
                $objDateStart->setTimezone(new DateTimeZone('Asia/Kolkata'));

                $objDateEnd = DateTime::createFromFormat('Y-m-d', $vDetail['end_date']);
                $objDateEnd->setTimezone(new DateTimeZone('Asia/Kolkata'));
                if ($objDateNow >= $objDateStart && $objDateNow <= $objDateEnd)
                {
                  ?>
         <div class="row" style="margin-top: 10px;">
            <div class="col-sm-4 col-md-4 col-xl-2 col-lg-4 pointer relvideo" onclick='video_link("<?php echo $vDetail['video_links']?>?autoplay=1",
               "<?php echo $vDetail['video_title']?>",
               "<?php echo $vDetail['video_description']?>"
               )'>
               <img src="<?php echo 'http://img.youtube.com/vi/'.substr($vDetail['video_links'],30,80).'/hqdefault.jpg' ?>" alt="" style="height:90px;margin-left:-14px; max-width: unset !important;  width: 150px !important;">
            </div>
            <div class="col-sm-8 col-md-8 col-xl-10 col-lg-8">
               <h4 class="v_title"  style="margin-left: 43px;"><?php echo $vDetail['video_title']?></h4>
               <p  class="p_desc"   style="margin-left: 43px;"><?php echo substr($vDetail['video_description'],0,20);?></p>
            </div>
         </div>
         <?php } 
            else
            {
             echo '';
            }
            ?> 
         <?php endforeach; ?>
         <br><br>
      </div>
   </div>

   <script>
   function video_link(url,title,des){
    $('#v_title').text(title);
    $('#v_dsc').text(des);
    $('.video_container').attr({
         src: url 
       });
   }
</script>

Following is an image how my page looks.

I do not know to do this. Please give me some solution to how I can play the next video automatically.

Comment what have you tried yet in your code to get next video playing — Amar Singh, Nov 01 '19 at 11:32
if you are using HTML5 video, you can use `ended` event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event) — Tareq, Nov 01 '19 at 11:34
Or for YT videos, check this https://stackoverflow.com/questions/7853904/how-to-detect-when-a-youtube-video-finishes-playing — Tareq, Nov 01 '19 at 11:36

score 0 · Answer 1 · answered Nov 01 '19 at 11:40

0

Code that uses JQUERY and show hello alert when the video finishes. Just add your code of getting next video inside of SetTimeOut.

   <!DOCTYPE html> 
    <html> 
    <body> 
    <video id="myVideo" width="320" height="176" controls>
      <source src="mov_bbb.mp4" type="video/mp4">
    </video>

    <script>
        $(document).ready(function(){
            var vid = document.getElementById("myVideo");
            //Converting seconds to miliseconds.
            var durationOfVideo   = parseInt(vid.duration * 1000);
            setTimeout(function(){
                alert("Hello"); 
            }, durationOfVideo);

    });

    </script> 


    </body> 
    </html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Make Sure To Import JQUERY In Bottom Because The .ready Will Called Before The JQUERY Loads. This Will Occur Error

answered Nov 01 '19 at 11:40

Ahmed Ali

1,908
14
28

alert show on the page refresh not in video over – farhantechno Nov 01 '19 at 11:48
wont handle a user pausing either.. this is not the correct way – Lawrence Cherone Nov 01 '19 at 11:49
This because the event is triggered when the pages load but when page loads the video is isn't load that why it will return 0 duration because it don't find any video element. I suggest that call the block of code on any event. – Ahmed Ali Nov 01 '19 at 11:50
@LawrenceCherone his question not clear that the pausing is included. – Ahmed Ali Nov 01 '19 at 11:51

I want to play next video automatically after current video is over

1 Answers1