我想在当前视频结束后自动播放下一个视频[重复]答案

【问题标题】：I want to play next video automatically after current video is over [duplicate]我想在当前视频结束后自动播放下一个视频[重复]
【发布时间】：2020-02-27 16:59:59
【问题描述】：

我的页面上有多个视频，如果当前视频结束，我想自动播放下一个视频。

我的代码：

<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>

以下是我的页面外观的图片。

我不知道该怎么做。请给我一些解决方案如何自动播放下一个视频。

【问题讨论】：

您是如何获得下一个视频的？
评论您在代码中尝试了什么以播放下一个视频
@Ibnelaiq by foreach 循环
如果你使用的是HTML5视频，你可以使用ended事件(developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…)
@YoYo 我还没试过我真的不知道这个

标签： javascript php jquery codeigniter

【解决方案1】：

使用 JQUERY 并在视频结束时显示 hello 警报的代码。只需在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>

确保在底部导入 JQUERY，因为 .ready 将在 JQUERY 加载之前调用。这会发生错误

【讨论】：

警告显示在页面刷新不在视频中
也不会处理用户暂停。这不是正确的方法
这是因为该事件在页面加载时触发，但在页面加载时视频未加载，因此它会返回 0 持续时间，因为它没有找到任何视频元素。我建议在任何事件上调用代码块。
@LawrenceCherone 他的问题不清楚是否包括暂停。