Question

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

我的代码：

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

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

我不知道这样做。请给我一些解决方案，让我可以自动播放下一个视频。

Answer 1

使用 JQUERY 并在视频结束时显示问候警报的代码。只需在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，因为将在加载JQUERY之前调用.ready。这会发生错误

我想在当前视频结束后自动播放下一个视频

1 个答案: