前言：前兩天有個同學問我音樂自動切換，并在所有歌曲都播放完成以后實現循環播放的效果。自己折騰了一下做了出來，今天整理桌面的時候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實現的方法有很多種，我這里簡單的實現。
通過修改video的src（這種應該是最好節省資源的）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>welcome</title> <style type="text/css"> .content { width: 600px; margin:0 auto; border:1px solid red; } .left-bar { width: 300px; height: 200px; float: left; border:1px solid red; } ul li { list-style: none; margin-top: 20px; cursor: pointer; } li:hover { color: orange; } </style></head><body><div class="left-bar"> <ul> <li class="music-name">十年</li> <li class="music-name">朋友</li> <li class="music-name">勇氣</li> </ul></div><div class="content"> <video src="" id="video1" controls autoplay></video> <button id="btn">按鈕</button></div><script> window.onload = function() { // 歌曲列表 var music = [ {id: 1, name:"十年"}, {id: 2, name:"朋友"}, {id: 3, name:"勇氣"} ] // 記錄當前是哪首歌曲 var currentMusic = 0; // 獲取DOM var oVideo1 = document.querySelector("#video1"); // 初始化 oVideo1.src = music[0].name + '.mp3'; // 歌曲結束事件 oVideo1.onended = function() { currentMusic += 1; // 判斷是否是最后一首 if(currentMusic === music.length) { currentMusic = 0; } var sr = music[currentMusic].name + '.mp3'; this.src=sr; } // 獲取左邊歌曲列表的DOM var aList = document.getElementsByClassName("music-name"); for(var i=0; i<aList.length; i++) { // 為了知道具體是那一個li aList[i].index = i; // 給每一個li設定一個事件 aList[i].onclick = function() { oVideo1.src = music[this.index].name + ".mp3"; } } }</script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
