构建HTML5视频播放列表的方法如下:
<video>
标签创建视频播放器 <source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持HTML5视频。
</video>
const videoList = [
{
title: '视频1',
src: 'video1.mp4',
type: 'video/mp4'
},
{
title: '视频2',
src: 'video2.mp4',
type: 'video/mp4'
},
{
title: '视频3',
src: 'video3.mp4',
type: 'video/mp4'
}
];
const videoPlayer = document.querySelector('video');
const playlist = document.createElement('ol');
videoList.forEach(video => {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.textContent = video.title;
link.href = '#';
link.addEventListener('click', (e) => {
e.preventDefault();
videoPlayer.src = video.src;
videoPlayer.type = video.type;
videoPlayer.load();
videoPlayer.play();
});
listItem.appendChild(link);
playlist.appendChild(listItem);
});
document.body.appendChild(playlist);
ol {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #007bff;
}
a:hover {
text-decoration: underline;
}
通过以上方法,您可以构建一个HTML5视频播放列表,用户可以通过点击播放列表中的链接切换播放不同的视频。
云+社区技术沙龙[第5期]
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
GAME-TECH
云+社区技术沙龙[第6期]
云+社区技术沙龙[第28期]
领取专属 10元无门槛券
手把手带您无忧上云