使用JavaScript腳本控制媒體播放（順序播放和隨機播放）
阿新 • • 發佈：2018-11-09
媒體播放 ack 播放視頻 doc 是否 http org enc 一個
在JavaScript腳本中獲取<audio.../>元素對應的對象為HTMLAudioElement對象，<video.../>元素對應的對象為HTMLVideoElement對象。
HTMLAudioElement對象和HTMLVideoElement對象支持的方法有如下幾個：
- play()：播放視頻、音頻
- pause()：暫停播放
- load()：重新裝載音頻、視頻文件
- canPlayType(type)：判斷該元素是否可以播放type類型的音頻、視頻。該屬性指定該音頻、視頻文件的類型，該屬性值既可以是簡單的MIME類型，例如audio/ogg、audio/mpeg等，也可以是MIME字符串並帶codecs屬性，codecs屬性用於指定該視頻文件的編碼格式。該方法可以返回如下3個值
- probably：該瀏覽器支持播放此種類型的音頻、視頻
- maybe：該瀏覽器可能支持播放此種類型的音頻、視頻
- 空字符串：該瀏覽器不支持播放此種類型的音頻、視頻
下面頁面代碼實現了一個簡單的音樂播放器，支持兩種播放模式：隨機播放和順序播放。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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>
頁面效果如下：
使用JavaScript腳本控制媒體播放（順序播放和隨機播放）