使用JavaScript脚本控制媒体播放

来源：互联网发布：淘宝童装店简介怎么写编辑：程序博客网时间：2024/06/05 17:14

一介绍

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>

三运行结果

查看图片附件

阅读全文

0 0