HTML 5 视频或音频播放列表

Posted 2023-02-25

【中文标题】HTML 5 视频或音频播放列表

【英文标题】：HTML 5 video or audio playlist

【发布时间】：2010-03-31 09:46:33

【问题描述】：

我可以使用<video> 或<audio> 标签来播放播放列表并对其进行控制吗？

我的目标是知道视频/歌曲何时播放完毕，然后播放下一个并改变音量。

【问题讨论】：

+1 表示对没有闪存的新技术感兴趣

***.com/questions/2741493/…

【参考方案1】：

你可以像这样在 onend 事件中加载下一个剪辑

<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 />

更多信息here

【讨论】：

这不只是播放2个文件，播放10个音频文件怎么样

我认为您所要做的就是创建一个 URL 数组（我们称之为 myArray），创建一个 var i = 1，最初将 nextVideo 设置为 myArray[0]，并在 videoPlayer 下。 src = nextVideo;把 nextVideo = myArray[i];我++；这样每次当前视频结束时，都会加载下一个视频，并且下一个 url 将准备就绪。 PS。抱歉完全没有格式，我在工作，只是想快速回答这个问题

对于那些希望在第二个视频结束后循环到第一个视频的人，这里是对上述答案的一个非常简单的改编： 小提琴：jsfiddle.net/P38aV

你永远不会只使用 onended。它将覆盖您或其他第三方库分配的任何其他onended 侦听器。始终使用videoPlayer.addEventListener("ended", cb)添加一个额外的事件监听器，而不是覆盖它。

【参考方案2】：

我在这里为此创建了一个 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;
​

【讨论】：

嗯，这不是播放列表，而是手动选择曲目

【参考方案3】：

我稍微优化了来自 cameronjonesweb 的 javascript 代码。现在您可以将剪辑添加到数组中。其他一切都是自动完成的。

<video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();">Your browser does not support the video tag.</video>

<script>
var nextsrc = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4"];
var elm = 0; var Player = document.getElementById('Player');
Player.onended = function()
    if(++elm < nextsrc.length)         
         Player.src = nextsrc[elm]; Player.play();
     

</script>

【讨论】：

如果您添加以下内容，您可以简单地列出您的数组中的所有多媒体文件（而不是将第一个编码为元素上的 src attr。if(!audioPlayer.src) audioPlayer.src = nextSong[currentSong];

另外，您必须添加 videoPlayer.play() 才能在 Microsoft Edge 中自动播放下一首歌曲。

很遗憾，不能在视频元素中使用“循环”属性。

【参考方案4】：

你应该看看 Popcorn.js - 一个用于与 Html5 交互的 javascript 框架：http://popcornjs.org/documentation

【参考方案5】：

jPlayer 是一个免费的开源 HTML5 音频和视频库，您可能会发现它很有用。它支持内置的播放列表： http://jplayer.org/

【参考方案6】：

试试这个解决方案，它获取一组音轨并播放所有这些音轨，播放列表样式，甚至循环播放列表。下面使用一点 Jquery 来缩短获取音频元素的时间。如果您不想使用 Jquery，请将 javascript 的第一行替换为 var audio = document.getElementById("audio");，它会起作用。

Javascript：

var audio = $("#audio")[0];
var tracks = 
    list: ["track_01.mp3", "track_02.mp3", "track_03.mp3"], //Put any tracks you want in this array
    index: 0,
    next: function() 
        if (this.index == this.list.length - 1) this.index = 0;
        else 
            this.index += 1;
        
    ,
    play: function() 
        return this.list[this.index];
    


audio.onended = function() 
    tracks.next();
    audio.src = tracks.play();
    audio.load();
    audio.play();


audio.src = tracks.play();

HTML：

<audio id="audio" controls>
    <source src="" />
</audio>

这将允许您以播放列表样式播放任意数量的歌曲。每首歌曲将在前一首歌曲结束后立即开始。我不相信这会在 Internet Explorer 中运行，但无论如何，是时候从那个古老的东西继续前进了！

只需将您想要的任何歌曲放入数组tracks.list，它就会一个接一个地播放所有歌曲。完成最后一首歌曲后，它还会循环回到第一首歌曲。

它比许多答案都短，它包含尽可能多的轨道，它很容易理解，并且它实际上在播放之前加载了音频（所以它确实有效），所以我想我会把它包括在这里。我找不到任何声音文件可以在运行的 sn-p 中使用，但我在 Chrome 上用我自己的 3 个音轨对其进行了测试，它可以工作。根据caniuse，检测ended事件的onended方法也适用于除Internet Explorer之外的所有浏览器。

注意：为了清楚起见，这适用于音频和视频。

【参考方案7】：

无法仅使用<video> 或<audio> 标记来定义播放列表，但有一些方法可以控制它们，因此您可以使用JavaScript 模拟播放列表。查看HTML5 spec 的第 4.8.7、4.8.9 节（尤其是 4.8.9.12）。希望大多数方法和事件都在现代浏览器上实现，例如 Chrome 和 Firefox（当然是最新版本）。

【参考方案8】：

是的，您可以简单地将您的 src 标签指向一个 .m3u 播放列表文件。 .m3u 文件很容易构建 -

#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

-----更新-----

好吧，事实证明播放列表 m3u 文件在 iPhone 上受支持，但在包括 Safari 5 在内的许多其他设备上都不支持，这有点令人难过。我不确定 android 手机，但我怀疑它们是否支持它，因为 Chrome 不支持。很抱歉提供错误信息。

【讨论】：

这不是真的。 HTML5 规范不支持 m3u 播放列表文件，但是有一个 jquery 插件 plugins.jquery.com/plugin-tags/m3u 添加了支持。

【参考方案9】：

我对所提供的内容不满意，所以这是我的建议，使用 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 数组，就完成了

【参考方案10】：

要添加到当前答案，这里有一个视频播放列表，可与单独的字幕文件一起使用。在播放列表的末尾，它将转到 endPage

<video id="video" controls autoplay preload="metadata">
   <source src="vid1.mp4" type="mp4">
   <track id="subs" label="English" kind="subtitles" srclang="en" src="sub1.vtt" default>
</video>

<script type="text/javascript">
var endPage = "duckduckgo.com";
var playlist = [
     
        'file': 'vid2.mp4',
        'subtitle': 'sub2.vtt'
    ,
        'file': 'vid3.mp4',
        'subtitle': 'sub3.vtt'
    
]
var i = 0;
var videoPlayer = document.getElementById('video');
var subtitles = document.getElementById('subs');
videoPlayer.onended = function()
    if(i < playlist.length)
        videoPlayer.src = playlist[i].file;
        subtitles.src = playlist[i].subtitle;
        i++;
     else 
        console.log("We are leaving")
        document.location.href = endPage;
    

</script>

【参考方案11】：

你可以添加一个事件监听器，第一个参数是 'ended'

像这样：

https://***.com/a/2880950/6839331

【参考方案12】：

已经完成了：http://www.jezra.net/projects/pageplayer