html5播放器视频切换和连续播放的实例
<!DOCTYPE html>
<html>
<head>
<title>HTML5 视频播放器</title>
<style>
#videoPlayer {
width: 640px;
height: 360px;
margin: 0 auto;
}
#videoList {
text-align: center;
}
</style>
</head>
<body>
<div id="videoPlayer">
<video id="myVideo" width="640" height="360" controls>
<source src="movie1.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频播放。
</video>
</div>
<div id="videoList">
<button onclick="switchVideo('movie1.mp4')">视频1</button>
<button onclick="switchVideo('movie2.mp4')">视频2</button>
<button onclick="switchVideo('movie3.mp4')">视频3</button>
</div>
<script>
var myVideo = document.getElementById('myVideo');
function switchVideo(src) {
myVideo.pause(); // 暂停当前视频
myVideo.src = src; // 更改视频源
myVideo.load(); // 加载新视频
myVideo.play(); // 播放新视频
}
</script>
</body>
</html>这段代码提供了一个简单的HTML5视频播放器，并包含了一个视频列表，用户可以点击列表中的按钮来切换视频源。当视频源改变时，switchVideo 函数会暂停当前视频，更新视频源，加载新视频，并播放新视频，实现了无缝切换的效果。
评论已关闭