HTML 5video或audio播放列表
我可以使用<video>或<audio>标签播放播放列表并控制它们吗？
我的目标是要知道什么时候video/歌曲已经播放完毕，并进行下一个改变音量。
你可以像这样加载下一个剪辑
<script type="text/javascript"> var nextVideo = "path/of/next/video.mp4"; var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.onended = function(){ videoPlayer.src = nextVideo; } </script> <video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />
更多信息在这里
我在这里创build了一个JS小提琴：
http://jsfiddle.net/Barzi/Jzs6B/9/
首先，你的HTML标记看起来像这样：
<video id="videoarea" controls="controls" poster="" src=""></video> <ul id="playlist"> <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li> <li movieurl="VideoURL2.webm">Second video</li> ... ... </ul>
其次，通过JQuery库的JavaScript代码如下所示：
$(function() { $("#playlist li").on("click", function() { $("#videoarea").attr({ "src": $(this).attr("movieurl"), "poster": "", "autoplay": "autoplay" }) }) $("#videoarea").attr({ "src": $("#playlist li").eq(0).attr("movieurl"), "poster": $("#playlist li").eq(0).attr("moviesposter") }) })
最后但并非最不重要的，你的CSS：
#playlist { display:table; } #playlist li{ cursor:pointer; padding:8px; } #playlist li:hover{ color:blue; } #videoarea { float:left; width:640px; height:480px; margin:10px; border:1px solid silver; }
你应该看看Popcorn.js – 与Html5交互的javascript框架： http ://popcornjs.org/documentation
jPlayer是一个免费的开源HTML5audio和video库，您可能会觉得有用。 它支持播放列表： http : //jplayer.org/
没有办法使用<video>或<audio>标签来定义播放列表，但是有些方法可以控制它们，所以您可以使用JavaScript来模拟播放列表。 查看HTML5规范的第4.8.7节，第4.8.9节（特别是第4.8.9.12节）。 希望大多数方法和事件都是在现代浏览器（如Chrome和Firefox）（当然是最新版本）上实现的。
是的，你可以简单地将你的src标签指向.m3u播放列表文件。 .m3u文件很容易构build –
#hosted mp3's need absolute paths but file system links can use relative paths http://servername.com/path/to/mp3.mp3 http://servername.com/path/to/anothermp3.mp3 /path/to/local-mp3.mp3
—– —–更新
那么，事实certificate，在iPhone 上支持播放列表M3U文件，但没有其他很多，包括Safari 5，这是一种伤心。 我不确定Android手机，但我怀疑他们是否支持，因为Chrome不支持。 对错误信息抱歉。
我优化了一些从cameronjonesweb的JavaScript代码。 现在，您可以将剪辑添加到数组中。 其他一切都是自动完成的。
var nextVideo = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/movie.mp4"]; var curVideo = 0; var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.onended = function(){ ++curVideo; if(curVideo < nextVideo.length){ videoPlayer.src = nextVideo[curVideo]; } }
<video width="320" height="240" autoplay controls id="videoPlayer"> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
它已经完成了： http : //www.jezra.net/projects/pageplayer
我对所提供的内容不满意，所以这里是我的build议，使用jQuery：
<div id="playlist"> <audio id="player" controls preload="metadata" volume="1"> <source src="" type="audio/mpeg"> Sorry, this browser doesn't support HTML 5.0 </audio> <ul></ul> </div> <script> var folder = "audio"; var playlist = [ "example1.mp3", "example2.mp3" ]; for (var i in playlist) { jQuery('#playlist ul').append('<li>'+playlist[i]+'</li>'); } 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(); } } </script>
您只需编辑playlist数组，即可完成