html5网页播放器视频切换、倍速切换、视频预览的代码实例
<!DOCTYPE html>
<html>
<head>
<title>HTML5 视频播放器示例</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<script>
var myVideo = document.getElementById("myVideo");
// 视频切换函数
function switchVideo(videoUrl) {
myVideo.src = videoUrl;
myVideo.load();
}
// 倍速播放控制
function playOrPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
// 倍速播放函数
function setPlaybackRate(rate) {
myVideo.playbackRate = rate;
}
</script>
<!-- 视频切换按钮 -->
<button onclick="switchVideo('video2.mp4')">切换视频</button>
<!-- 播放/暂停按钮 -->
<button onclick="playOrPause()">
{{ '播放' if myVideo.paused else '暂停' }}
</button>
<!-- 倍速播放按钮 -->
<button onclick="setPlaybackRate(0.5)">半速</button>
<button onclick="setPlaybackRate(1)">正常速度</button>
<button onclick="setPlaybackRate(2)">双倍速度</button>
</body>
</html>这个代码实例提供了一个简单的HTML5视频播放器，并包括了视频切换、播放和暂停控制以及倍速播放的功能。它使用JavaScript来控制视频元素的属性，并通过HTML按钮触发这些功能。这个示例可以作为开发者学习和实践HTML5视频播放以及JavaScript控制的起点。
评论已关闭