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
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
