html5 --- > 使用javascript脚本控制媒体播放

最新推荐文章于 2024-10-03 09:57:37 发布

栗子好好吃

最新推荐文章于 2024-10-03 09:57:37 发布

阅读量406

点赞数

分类专栏： html5 文章标签：就是大概了解一下深入理解肯定得看其他的..

html5 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了H5中的<audio…/> 和 <video…/>标签对应JS里HTMLAudioElement和HTMLVideoElement对象的方法，如play()播放、pause()暂停等，还提及一个简单音乐播放器，并给出参考书籍页码。

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

H5中的标签(<audio…/> 和 <video…/>)对于JS中的HTMLAudioElement对象和HTMLVideoElement对象
对象有以下几个方法:
play(): 播放
pause(): 暂停播放
load(): 重新装载音频、视频
canPlayType(type): 判断该元素可播放type类型的音频、视频

下面是一个简单的音乐播放器

<title>音乐播放器</title>
</head>
<body>
	<h2> 音乐播放器 </h2>
	<select id='typeSel' style='width:160px'>
		<option value='sequence'>顺序播放</option>
		<option value='random'>随机播放</option>
	</select><br />
	<audio id='player' controls>
		您的浏览器不支持audio元素
	</audio>
	
    <script type="text/javascript">
		var musics = [
			"demo1.ogg",
			"bomb.ogg",
			"arrow.ogg",
			"love.ogg",
			"song.ogg",
		];
		var index = 0;
		var palyType;
		window.onload = function()
		{
			var typeSel = document.getElementById('typeSel');
			typeSel.onchange = function()
			{
				window.playType = typeSel.value;
			}
			var player = document.getElementById('player');
			player.src = musics[index];
			player.onended = function ()
			{
				if(playType == 'random')
				{
					index = Math.floor(Math.random() * musics.length);
					palyer.src = musics[index];
				}
				else{
					player.src= musics[++index %musics.length];
				}
				player.play();
			}
		}
	</script>	


</body>
</html>

在这里插入图片描述
参考《疯狂HTML5 + CSS3 + JavaScript讲义》(第2版) P141~P142