使用JavaScript脚本控制媒体播放

最新推荐文章于 2024-09-29 17:32:12 发布

iteye_5722

最新推荐文章于 2024-09-29 17:32:12 发布

阅读量213

点赞数

分类专栏： HTML5 文章标签： JavaScript 媒体播放 ViewUI

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一介绍

1、在HTML页面中获取<audio>和<video>元素播放音频和视频之外，很多时候我们还需要JavaScript来控制这些元素的播放。

2、在JavaScript中获取<audio>元素对应的对象为HTMLAudioElement的对象，<vidio>元素对应的对象为HTMLVideoElement对象。

3、HTMLAudioElement的对象和HTMLVideoElement对象支持方法如下：

paly():播放音频和视频。

pause()：暂停播放。

load()：重新装载音频和视频文件。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 音乐播放器 </title>
	<script type="text/javascript">
		// 定义能播放的所有音乐
		var musics = [
			"demo1.ogg",
			"bomb.ogg",
			"arrow.ogg",
			"love.ogg",
			"song.ogg",
		];
		// 定义正在播放的音频文件的索引
		var index = 0;
		// 记录顺序播放、随机播放的变量
		var playType;
		var player;
		window.onload = function()
		{
			var typeSel = document.getElementById("typeSel");
			// 当用户更改下拉菜单的选项时，改变播放方式
			typeSel.onchange = function()
			{
				window.playType = typeSel.value;
			}
			player = document.getElementById("player");
			// 页面加载时播放第一个音频文件
			player.src = musics[index];
			player.onended = function()
			{
				if(playType == "random")
				{
					// 计算一个随机数
					index = Math.floor(Math.random() * musics.length);
					// 随机播放一个音频文件
					player.src = musics[index];
				}
				else
				{
					// 播放下一个音频文件
					player.src = musics[++index % musics.length];
				}
				// 播放
				player.play();
			}
		}
	</script>
</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>
</body>
</html>

三运行结果