HTML5：视频控制

最新推荐文章于 2024-03-24 10:00:00 发布

原创最新推荐文章于 2024-03-24 10:00:00 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #视频

[---h5+c3---] 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了HTML5中用于视频控制的属性，包括播放、暂停、音量调节等，帮助开发者更好地实现网页上的视频交互体验。

一：HTML5属性控制视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<video src="img/test.mp4" 
			width="300px" 
			height="200px" 
			loop="3" 
			autoplay="autoplay"
			controls="controls"></video>
	</body>
</html>

属性解读

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
pixels	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

二：DOM属性控制视频

<span style="font-size:14px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="text-align: center;">
			<button onclick="playPause()">播放</button>
			<button onclick="makeBig()">放大</button>
			<button onclick="makeNormal()">原样</button>
			<button onclick="makeSmall()">变小</button>
			<br/>
			<video id="viedo1" width="420px" style="margin-top: 15px;">
				<source src="img/test.mp4" type="video/mp4"/>
			</video>
		</div>
		<script type="text/javascript">
			var myViedo = document.getElementById('viedo1');
			function playPause(){
				if(myViedo.paused)
					myViedo.play();
			}
			function makeBig(){
				myViedo.width=560;
			}
			function makeNormal(){
				myViedo.width=420;
			}
			function makeSmall(){
				myViedo.width=320;
			}
		</script>
	</body>
</html></span>