HTML5的多媒体支持

时间 2019-11-11

原文原文链接

<!DOCTYPE html>
<html>
<head>
<title>HTML5的多媒体支持</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
</head>
<body>

<h2>音频播放</h2>
<audio src="audios/1.mp3" controls>你的浏览器不支持audio元素</audio>
<h2>视频播放</h2>


 javascript

html

<h2>音乐播放器</h2>
<select id="typeSel" style="width:160px">
<option value="sequence">顺序播放</option>
<option value="randome">随机播放</option>
</select><br/>
<audio id="player" controls>浏览器不支持audio元素</audio>
<script type="text/javascript">
//定义全部播放的音乐
var musics=["audios/1.mp3","audios/2.mp3"];
//定义正在播放的音频索引
var index=1; java

//记录顺序播放,随机播放的变量
var playType;
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.onender=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>


<h2>事件监听</h2>
<video src="videos/MIUI.webm" id="mv" loop></video><br/>
<input type="button" id="btn" value="播放"/>
<span id="detail"></span>秒
<script type="text/javascript">
var mv=document.getElementById('mv');
var btn=document.getElementById('btn');
var details=document.getElementById('detail');
mv.ontimeupdate=function(){
//前面一个属性表示当前播放到的位置,后面一个属性表示视频总的时长
details.innerHTML=mv.currentTime+"/"+mv.duration;
};
btn.onClick=function(){
if(mv.paused){
  mv.play();
  btn.value="暂停";
  }else{
   mv.pause();
   btn.value="播放";
   }
}
</script>
</body>
</html> ios