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

Javascript 我想在当前视频结束后自动播放下一个视频,javascript,php,jquery,codeigniter,Javascript,Php,Jquery,Codeigniter,我的页面上有几个视频,如果当前视频结束,我想自动播放下一个视频 我的代码: <div class="container-fluid"> <br><br><br><br> <div class="row"> <div class="col-sm-7 bannervideo"> <iframe oncontextmenu="return false" class="vid

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

我的代码:

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





下一个
使用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>

$(文档).ready(函数(){
var vid=document.getElementById(“myVideo”);
//将秒转换为毫秒。
var durationOfVideo=parseInt(vid.duration*1000);
setTimeout(函数(){
警惕(“你好”);
},视频的持续时间);
});

确保在底部导入JQUERY,因为在加载JQUERY之前将调用
.ready
。这将出现错误

代码,该代码使用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>

$(文档).ready(函数(){
var vid=document.getElementById(“myVideo”);
//将秒转换为毫秒。
var durationOfVideo=parseInt(vid.duration*1000);
setTimeout(函数(){
警惕(“你好”);
},视频的持续时间);
});


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

,您是如何获取下一个视频的?请评论您在代码中尝试了哪些内容来获取下一个视频playing@Ibnelaiq如果您使用的是HTML5视频,则可以使用
end
event()@YoYo我还没有尝试,我真的不知道如何从你得到下一个视频到这个?评论你在代码中尝试了什么来获得下一个视频playing@Ibnelaiq如果您使用的是HTML5视频,则可以使用
end
event()@YoYo我还没有尝试,我真的不知道如何在页面上显示此警报刷新不在视频上处理用户暂停。。这不是正确的方法这是因为事件是在页面加载时触发的,但当页面加载时,视频不会加载,这就是为什么它会返回0 duration,因为它找不到任何视频元素。我建议在任何事件中调用代码块。@Lawrence Cherone他的问题不清楚暂停是否包括在内。页面上的警报显示刷新不在视频中覆盖处理用户暂停。。这不是正确的方法这是因为事件是在页面加载时触发的,但当页面加载时,视频不会加载,这就是为什么它会返回0 duration,因为它找不到任何视频元素。我建议对任何事件调用代码块。@lawrencerone他的问题不清楚暂停是否包括在内。