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

最新推荐文章于 2024-01-25 17:24:28 发布

唐小狼

最新推荐文章于 2024-01-25 17:24:28 发布

阅读量4.4k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/49617401

版权

html 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

强大而灵活的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 οnclick="playPause()">播放/暂停</button>
		<button οnclick="makeBig()">放大</button>
		<button οnclick="makeSmall()">缩小</button>
		<button οnclick="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>