点击按钮切换视频：仿视频网站

黄大新

于 2024-06-19 16:42:00 发布

阅读量174

点赞数 3

文章标签： html 前端 javascript css

本文链接：https://blog.youkuaiyun.com/WUXIANJINBU/article/details/139807275

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频切换</title>
        <style>
            .视频框{
                width: 500px;
                height: 350px;
            }
        </style>
	</head>

	<body>
		<video id="video" width="100%" height="100%" autoplay loop controls class="视频框">
			<source id="source" src="https://media.w3.org/2010/05/sintel/trailer.mp4">
		</video>
			
		<button id="but1">第一个</button> 
		<button id="but2">第二个</button> 
		<button id="but3">第三个</button> 

		<script type="text/javascript">
			document.getElementById("but1").onclick = function() {
				document.getElementById("source").src = "./video/1.mp4";
				document.getElementById("video").load();
			}
			document.getElementById("but2").onclick = function() {
				document.getElementById("source").src = "https://media.w3.org/2010/05/sintel/trailer.mp4";
				document.getElementById("video").load();
			}
			document.getElementById("but3").onclick = function() {
				document.getElementById("source").src = "./video/2.mp4";
				document.getElementById("video").load();
			}

		</script>
	</body>
</html>