javascript - 我想在当前视频结束后自动播放下一个视频
问题描述
我的页面上有几个视频,如果当前视频结束,我想自动播放下一个视频。
我的代码:
<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>
确保在底部导入 JQUERY,因为.ready
将在 JQUERY 加载之前调用。这将发生错误
推荐阅读
- javascript - 单击下一步按钮时,水平幻灯片页面需要设置位置顶部
- rails-activestorage - DirectUpload / ActiveStorage / Rails 出现错误 http 422
- php - 当链接目标为“_blank”时,Internet Explorer 11 丢失 iframe 嵌入式网站的 cookie - 相同的域,不同的子域
- azure - 从逻辑应用启动 Azure Devops 发布管道
- python - 如何通过Python将设定行范围内的文本文件转换为json格式
- django - 在 Django 的过滤中匹配数据库列
- javascript - React JS数组过滤器返回空数组,尽管过滤器返回true
- lerna - 使用共享库时 Yarn 工作区的最佳实践
- c++ - RISC-V 内联汇编结构优化了
- java - 错误:语句关闭后不允许任何操作