WEB前端代码：HTML5视频标签:video、HTML5视频结合DOM操作、HTML5中音频结合DOM操作

最新推荐文章于 2024-06-25 01:55:43 发布

hahahafree

最新推荐文章于 2024-06-25 01:55:43 发布

阅读量1.2k

点赞数 1

分类专栏： Web 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/95352523

版权

Web 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1、HTML5视频标签:video

<video src="/video/cartoon.webm" controls="controls" autoplay width="700px" height="300px"></video>
</body>

2、HTML5视频结合DOM操作

</body>
	<video src="/video/cartoon.webm" id="video"></video>
	<br>
	<button id="start">start</button>
	<button id="stop">stop</button>
</body>
<script type="text/javascript">
	start=document.getElementById('start');
	stop=document.getElementById('stop');
	video=document.getElementById('video');

	start.onclick=function(){
		video.play();
	}

	stop.onclick=function(){
		video.pause();
	}

	video.onplay=function(){
		document.body.style.background='#888';
	}

	video.onpause=function(){
		document.body.style.background='#aff';
	}
</script>

3、HTML5中音频结合DOM操作

<body>
	<img src="cd.png" id="cd">
	<br>
	<audio src="go.mp3" id='video'></audio>
	<br>
	<button id='start'>start</button>
	<button id='stop'>stop</button>
</body>
<script>
start=document.getElementById('start');
stop=document.getElementById('stop');
video=document.getElementById('video');
cd=document.getElementById('cd');

start.onclick=function(){
	video.play();
}

stop.onclick=function(){
	video.pause();
}

video.onplay=function(){
	document.body.style.background='#faa';

	s=0;
	v=10;
	sobj=setInterval(function(){
		s+=v;

		cd.style.transform='rotate('+s+'deg)';
	},30);
}

video.onpause=function(){
	document.body.style.background='#aaf';
	clearInterval(sobj);
	
}
</script>