用PHP写一个随机播放mp4目录下视频的代码并用css js 写一个美化模板框架 播放视频 要自动下一个视频功能
以下是一个简单的随机播放mp4目录下视频的PHP代码：
<?php
//设置mp4目录
$dir = 'mp4/';
//获取目录下所有mp4文件
$files = glob($dir . '*.mp4');
//随机选择一个视频文件
$random_file = $files[array_rand($files)];
//输出视频播放代码
echo '<video controls autoplay>
<source src="' . $random_file . '" type="video/mp4">
</video>';
?>
接下来，我们可以使用CSS和JS来美化和增强这个播放器的功能。
以下是一个简单的美化模板框架，包括播放器区域和自动播放下一个视频的功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机播放器</title>
<style>
/* 播放器样式 */
#player {
width: 640px;
height: 360px;
margin: 0 auto;
position: relative;
}
#player video {
width: 100%;
height: 100%;
}
/* 播放列表样式 */
#playlist {
margin-top: 20px;
text-align: center;
}
#playlist ul {
list-style: none;
padding: 0;
margin: 0;
}
#playlist ul li {
display: inline-block;
margin: 5px;
cursor: pointer;
}
#playlist ul li.active {
color: red;
}
</style>
</head>
<body>
<div id="player">
<video controls autoplay>
<source src="" type="video/mp4">
</video>
</div>
<div id="playlist"></div>
<script>
//获取播放器和播放列表元素
var player = document.querySelector('#player video');
var playlist = document.querySelector('#playlist');
//设置mp4目录
var dir = 'mp4/';
//获取目录下所有mp4文件
var files = <?php echo json_encode(glob($dir . '*.mp4')); ?>;
//创建播放列表
var playlist_html = '<ul>';
files.forEach(function(file) {
playlist_html += '<li data-src="' + file + '">' + file + '</li>';
});
playlist_html += '</ul>';
playlist.innerHTML = playlist_html;
//获取播放列表项
var playlist_items = document.querySelectorAll('#playlist li');
//随机选择一个视频文件并播放
var random_file = files[Math.floor(Math.random() * files.length)];
player.src = random_file;
//设置播放列表项的点击事件
playlist_items.forEach(function(item) {
item.addEventListener('click', function() {
//移除其他项的active类样式
playlist_items.forEach(function(item) {
item.classList.remove('active');
});
//设置当前项的active类样式
this.classList.add('active');
//切换视频
player.src = this.getAttribute('data-src');
player.play();
});
});
//设置视频播放结束事件
player.addEventListener('ended', function() {
//查找当前播放视频在列表中的索引
var current_index = Array.prototype.indexOf.call(playlist_items, document.querySelector('#playlist li.active'));
//选中下一个视频
var next_index = current_index + 1;
if (next_index >= playlist_items.length) {
next_index = 0;
}
playlist_items[next_index].click();
});
//设置第一个视频为默认播放
playlist_items[0].click();
</script>
</body>
</html>
这个模板框架在播放器区域添加了一个播放列表，允许用户选择要播放的视频。当视频播放结束时，它会自动选择下一个视频进行播放。
原文地址: https://www.cveoy.top/t/topic/b2zn 著作权归作者所有。请勿转载和采集!