前言：前兩天有個(gè)同學(xué)問我音樂自動(dòng)切換，并在所有歌曲都播放完成以后實(shí)現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來，今天整理桌面的時(shí)候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實(shí)現(xiàn)的方法有很多種，我這里簡(jiǎn)單的實(shí)現(xiàn)。
通過修改video的src（這種應(yīng)該是最好節(jié)省資源的）
<!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:"勇氣"}
]
// 記錄當(dāng)前是哪首歌曲
var currentMusic = 0;
// 獲取DOM
var oVideo1 = document.querySelector("#video1");
// 初始化
oVideo1.src = music[0].name + '.mp3';
// 歌曲結(jié)束事件
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++) {
// 為了知道具體是那一個(gè)li
aList[i].index = i;
// 給每一個(gè)li設(shè)定一個(gè)事件
aList[i].onclick = function() {
oVideo1.src = music[this.index].name + ".mp3";
}
}
}
</script>
</body>
</html>
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
