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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。