HTML5<video>标签，使用DOM进行播放控制

最新推荐文章于 2025-05-27 15:30:06 发布

唐小狼

最新推荐文章于 2025-05-27 15:30:06 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/tangxiaolang101/article/details/49617401

html 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了HTML5中的<video>标签及其相关属性、事件和操作方法，提供了实例代码，便于开发者创建丰富的视频展示网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

强大而灵活的html5标签，今天学习了一下<video>标签，对以后写视频展示类的网站应该很有帮助，以下是w3cschool中的部分实例代码：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<head>
	
</head>
<body>
	<div style="text-align:center">
		<button onclick="playPause()">播放/暂停</button>
		<button onclick="makeBig()">放大</button>
		<button onclick="makeSmall()">缩小</button>
		<button onclick="makeNormal()">普通</button>
		<br />
		<video id="video1" width="420">
			<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
		</video>
		
	</div>

	<script type="text/javascript">
		var myVideo = document.getElementById("video1");
		function playPause()
		{
			if(myVideo.paused)
				myVideo.play();
			else
				myVideo.pause();
		}
		function makeBig(){
			myVideo.width=560;
		}
		function makeSmall()
		{
			myVideo.width=320;
		}
		function makeNormal(){
			myVideo.width=420;
		}
	</script>
</body>
</html>

<video>定义一个视频；

<source>定义多种媒体资源。

定义音频：

<div style="text-align:center">
		<audio controls>
			<source src="http://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
		</audio>
	</div>