javascript - HTML 自动播放视频并从文件夹继续循环
问题描述
我想运行文件夹中的所有视频,自动播放它们并连续重复它们。
我找到了一些 javascript 代码,它运行良好,但它必须包含在 javascript 代码列表中,有没有办法更改此编码以读取文件夹中的所有视频。
这是javascript代码:
<div class="main">
<video src="video\\video1.mp4" id="myvideo" width="100%" height="100%" controls autoplay poster="gambar\logo.png">
</video>
<script>
var myvid = document.getElementById('myvideo');
var myvids = [
"video\\video1.mp4",
"video\\video2.mp4",
"video\\video3.mp4"
];
var activeVideo = 0;
myvid.addEventListener('ended', function(e) {
// update the new active video index
activeVideo = (++activeVideo) % myvids.length;
// update the video source and play
myvid.src = myvids[activeVideo];
myvid.play();
});
</script>
</div>
如果确实有另一种方式我也会接受它,也许使用数据库来读取文件或其他编码。请帮忙。
解决方案
假设您使用的是 PHP ,
<?php
$directory='videos'; // Add your Directory here
$path = './'.$directory.'/';
$allFiles = scandir($path,1);
$files = array_diff($allFiles, array('.', '..'));
print_r($files)
?>
<div class="main">
<video src="<?php echo 'videos/'.$files[0];?>" id="myvideo" width="100%" height="100%" controls autoplay poster="gambar\logo.png">
</video>
<script type='text/javascript'>
var directory = '<?php echo $directory;?>';
var myvids = <?php echo json_encode($files); ?>;
index=0;
document.getElementById('myvideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
index++;
// For Repeating all video files
if(index>=myvids.length)
index=0;
var vid = document.getElementById("myvideo");
vid.src = directory+'/'+myvids[index];
}
</script>
</div>
希望对你有帮助 !.
推荐阅读
- dax - DAX 查询以添加数字直到满足条件
- ruby-on-rails - 如何正确使用每当宝石
- sql - SQL 查询错误'多部分标识符 vSMS_CombinedDeviceResources.MachineID 无法绑定'
- android - 我不明白为什么 Gradle 无法构建项目
- angular - 在 Angular6 中导出 Excel 文件:日期时间格式字段为空
- python - Python form.validate_on_submit() 总是假的
- database - 什么是`esb`,如何实现异步数据功能?
- php - 我无法将 Mysql 查询转换为 laravel 查询生成器
- javascript - 将数据保存到单独的集合
- php - 需要在数组中获取唯一值