html5 制作 视频 播放 列表,HTML 5视频或音频播放列表

我并不满足于被提供了,所以这里是我的建议,使用jQuery:

Sorry, this browser doesn't support HTML 5.0

var folder = "audio";

var playlist = [

"example1.mp3",

"example2.mp3"

];

for (var i in playlist) {

jQuery('#playlist ul').append('

'+playlist[i]+'');

}

var player = document.getElementById('player');

var playing = playlist[0];

player.src = folder + '/' + playing;

function display(id) {

var list = jQuery('#playlist ul').children();

list.removeClass('playing');

jQuery(list[id]).addClass('playing');

}

display(0);

player.onended = function(){

var ind_next = playlist.indexOf(playing) + 1;

if (ind_next !== 0) {

player.src = folder + '/' + playlist[ind_next];

playing = player.src;

display(ind_next)

player.play();

}

}

您只需编辑playlist array,你就完成了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用HTML5的 `<audio>` 标签来实现音乐播放,同时使用CSS美化界面。下面是一个简单的示例: ```html <audio id="myAudio" controls> <source src="music.mp3" type="audio/mpeg"> 您的浏览器不支持 HTML5 音频。 </audio> <style> /* 控制条样式 */ .controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } /* 播放/暂停按钮样式 */ .play-pause { background-color: #009688; color: #fff; border: none; padding: 10px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: background-color 0.3s ease; } .play-pause:hover { background-color: #00796b; } /* 时间进度条样式 */ .progress { width: 80%; height: 4px; background-color: #ccc; position: relative; margin-left: 10px; } .progress-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: #009688; transition: width 0.1s ease; } </style> <script> const audio = document.getElementById("myAudio"); const playPauseBtn = document.getElementById("play-pause-btn"); const progressBar = document.getElementById("progress-bar"); // 播放/暂停按钮点击事件 playPauseBtn.addEventListener("click", () => { if (audio.paused) { audio.play(); playPauseBtn.innerHTML = "暂停"; } else { audio.pause(); playPauseBtn.innerHTML = "播放"; } }); // 音频时间变化事件 audio.addEventListener("timeupdate", () => { const progressWidth = (audio.currentTime / audio.duration) * 100; progressBar.style.width = `${progressWidth}%`; }); </script> <div class="controls"> <button id="play-pause-btn" class="play-pause">播放</button> <div class="progress"> <div id="progress-bar" class="progress-bar"></div> </div> </div> ``` 你可以根据需要修改样式和交互效果,实现自己想要的音乐播放界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值