前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下做了出来,今天整理桌面的时候突然看的见,在拖到回收站的一瞬间想着还是写一篇博客分享一下。实现的方法有很多种,我这里简单的实现。
通过修改视频的src(这种应该是最好节省资源的)
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> welcome
& lt;风格类型=" text/css "比;
.content {
宽度:600 px;
保证金:0汽车;
边界:1 px固体红;
}
.left-bar {
宽度:300 px;
身高:200 px;
浮:左;
边界:1 px固体红;
}
ul李{
list-style:没有;
margin-top: 20 px;
光标:指针;
}
李:{徘徊
颜色:橙色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=白蟛嗬浮北?
& lt; ul>
& lt;李类=" music-name "在十年& lt;/li>
& lt;李类=" music-name "在朋友& lt;/li>
& lt;李类=" music-name "祝辞勇气& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=澳谌荨北?
& lt;视频src=" id=皏ideo1”控制autoplay> & lt;/video>
& lt;按钮id=" btn "祝辞按钮& lt;/button>
& lt;/div>
& lt; script>
窗口。onload=function () {//歌曲列表
var=[音乐
{id: 1、名称:"十年"},
{id: 2、名称:“朋友"},
{id: 3名:“勇气”}
]//记录当前是哪首歌的曲
var currentMusic=0;//获取DOM
var oVideo1=document.querySelector (“# video1”);//初始化
oVideo1。src=https://www.yisu.com/zixun/music [0] . name + mp3的;//歌曲结束事件
oVideo1。竖着=function () {
currentMusic +=1;//判断是否是最后一首
如果(currentMusic===music.length) {
currentMusic=0;
}
老var=音乐[currentMusic] . name + mp3的;
this.src=https://www.yisu.com/zixun/sr;
}//获取左边歌曲列表的DOM
var倾斜的=document.getElementsByClassName (“music-name”);
(var=0;i
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
