js+video实现视频播放

最新推荐文章于 2025-08-15 15:51:27 发布

原创最新推荐文章于 2025-08-15 15:51:27 发布 · 3.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js

技术小妙招专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了一个基于HTML5的视频播放器控制实现过程，包括如何使用JavaScript来控制播放、暂停、静音和重播等功能。同时，文章还提供了完整的代码示例，帮助读者理解并实践视频播放器的定制化控制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>视频案例</title>
	</head>
	<body>
		<video width="" height="" autoplay controls loop="loop" poster="img/lbt3_img1.jpg">
			<source src="video/iceage4.mp4" type="video/mp4"></source>
			<source src="video/street.wmv" type="video/ogg"></source>
			<source src="video/iceage4.webm" type="video/webm"></source>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
		</video>
		<button id="play">播放</button>
		<button id="ponse">暂停/继续</button>
		<button id="meter">静音</button>
		<button id="load">重播</button>
		<script type="text/javascript">
			var play = document.getElementById("play");
			var ponse = document.getElementById("ponse");
			var meter = document.getElementById("meter");
			var load = document.getElementById("load");
			var video1 = document.getElementsByTagName("video")[0];
			play.onclick = function () {
				video1.play();
			}
			ponse.onclick = function () {
				if (video1.paused) {
					video1.play();
				} else{
					video1.pause();
				}
			}
			load.onclick = function () {
				video1.load();
				video1.autoplay=true;
			}
			meter.onclick = function () {
				if (video1.muted) {
					video1.muted=false;
				}else{
					video1.muted=true;
				}
			}
		</script>
	</body>
</html>