HTML 5 Video- oder Audio-Wiedergabeliste

69

Kann ich ein <video>oder <audio>-Tag verwenden, um eine Wiedergabeliste abzuspielen und zu steuern?

Mein Ziel ist es zu wissen, wann ein Video / Song fertig ist, das nächste aufzunehmen und seine Lautstärke zu ändern.

xdevel2000
quelle
28
+1 für Interesse an neuen Technologien ohne Flash
markcial

Antworten:

67

Sie können den nächsten Clip so in das onend-Ereignis laden

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

Weitere Informationen hier

markcial
quelle
Wird dies nicht nur 2 Dateien abspielen, wie wäre es mit 10 Audiodateien abspielen
defau1t
2
Ich denke, alles, was Sie tun müssen, ist ein Array von URLs zu erstellen (nennen wir es myArray), eine Variable i = 1 zu erstellen, nextVideo zunächst auf myArray [0] zu setzen und unter videoPlayer.src = nextVideo; put nextVideo = myArray [i]; i ++; Auf diese Weise wird jedes Mal, wenn das aktuelle Video beendet wird, das nächste Video geladen und die nächste URL ist bereit. PS. Entschuldigung für den völligen Mangel an Formatierung, ich bin auf der Arbeit und wollte dies nur schnell beantworten
DanTheMan
2
Für diejenigen, die zum ersten Video zurückkehren möchten, nachdem das zweite beendet ist, gibt es hier eine sehr einfache Anpassung der obigen Antwort: <script> var nextVideo = ["Pfad / von / aktuell / video.mp4", "Pfad / von / next / video.mp4 "]; var curVideo = 0; var videoPlayer = document.getElementById ('videoPlayer'); videoPlayer.onended = function () {if (curVideo == 0) {videoPlayer.src = nextVideo [1]; curVideo = 1; } else if (curVideo == 1) {videoPlayer.src = nextVideo [0]; curVideo = 0; }} </ script> Fiddle: jsfiddle.net/P38aV
cameronjonesweb
13

Ich habe hier eine JS-Geige dafür erstellt:

http://jsfiddle.net/Barzi/Jzs6B/9/

Zunächst sieht Ihr HTML-Markup folgendermaßen aus:

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

Zweitens sieht Ihr JavaScript-Code über die JQuery-Bibliothek folgendermaßen aus:

$(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")
    })
})​

Und zu guter Letzt Ihr 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;
}​
Maziar Barzi
quelle
Nun
6

Ich habe den Javascript-Code von cameronjonesweb ein wenig optimiert. Jetzt können Sie einfach die Clips zum Array hinzufügen. Alles andere wird automatisch erledigt.

<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>
Stier
quelle
Wenn Sie Folgendes hinzufügen, können Sie einfach alle Ihre Multimediadateien in Ihrem Array auflisten (anstatt die erste als src-Attribut für das Element zu codieren.if(!audioPlayer.src){ audioPlayer.src = nextSong[currentSong]; }
Ronnie Royston,
Außerdem müssen Sie videoPlayer.play()für das nächste Lied die automatische Wiedergabe in Microsoft Edge hinzufügen .
Ronnie Royston
Das Attribut "loop" im Videoelement kann leider nicht verwendet werden.
Jay
2

jPlayer ist eine kostenlose und Open-Source-HTML5-Audio- und -Videobibliothek, die Sie möglicherweise nützlich finden. Es unterstützt integrierte Wiedergabelisten: http://jplayer.org/

Yagoogaly
quelle
2

Probieren Sie diese Lösung aus, sie benötigt eine Reihe von Soundtracks und spielt alle im Playlist-Stil ab und wiederholt sogar die Playlist . Im Folgenden wird ein wenig Jquery verwendet, um das Abrufen des Audioelements zu verkürzen. Wenn Sie Jquery nicht verwenden möchten, ersetzen Sie die erste Zeile des Javascript durch var audio = document.getElementById("audio");und es funktioniert genauso.

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>

Auf diese Weise können Sie beliebig viele Songs im Wiedergabelistenstil abspielen. Jedes Lied beginnt, sobald das vorherige beendet ist. Ich glaube nicht, dass dies in Internet Explorer funktionieren wird, aber es ist trotzdem Zeit, von dieser alten Sache fortzufahren!

Fügen Sie einfach tracks.listalle gewünschten Songs in das Array ein und alle werden nacheinander abgespielt. Es kehrt auch zum ersten Song zurück, sobald der letzte fertig ist.

Es ist kürzer als viele der Antworten, es enthält so viele Titel, wie Sie möchten, es ist leicht verständlich und es lädt das Audio tatsächlich vor der Wiedergabe (damit es tatsächlich funktioniert), also dachte ich, ich würde es hier aufnehmen. Ich konnte keine Sounddateien finden, die in einem laufenden Snippet verwendet werden könnten, aber ich habe es mit 3 meiner eigenen Soundtracks auf Chrome getestet und es funktioniert. Die onendedMethode, die das endedEreignis erkennt , funktioniert auch in allen Browsern außer Internet Explorer gemäß caniuse.

HINWEIS: Nur um klar zu sein, funktioniert dies sowohl mit Audio als auch mit Video .

Cannizid
quelle
1

Es gibt keine Möglichkeit, eine Wiedergabeliste nur mit einem <video>oder einem <audio>Tag zu definieren , aber es gibt Möglichkeiten, sie zu steuern, sodass Sie eine Wiedergabeliste mit JavaScript simulieren können. Lesen Sie die Abschnitte 4.8.7, 4.8.9 (insbesondere 4.8.9.12) der HTML5-Spezifikation . Hoffentlich werden die meisten Methoden und Ereignisse in modernen Browsern wie Chrome und Firefox implementiert (natürlich die neuesten Versionen).

Felix
quelle
1

Ja, Sie können Ihr src-Tag einfach auf eine .m3u-Wiedergabelistendatei verweisen. Eine .m3u-Datei ist einfach zu erstellen -

#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

-----AKTUALISIEREN-----

Nun, es stellt sich heraus , Playlist M3U - Dateien werden auf dem iPhone unterstützt, aber nicht auf viel mehr einschließlich Safari 5 , die irgendwie traurig ist. Ich bin mir bei Android-Handys nicht sicher, aber ich bezweifle, dass sie es auch unterstützen, da Chrome dies nicht tut. Entschuldigung für die Fehlinformationen.

Marcus Pope
quelle
3
Das ist eigentlich nicht wahr. Die HTML5-Spezifikationen unterstützen keine m3u-Wiedergabelistendateien, es gibt jedoch ein jquery-Plugin plugins.jquery.com/plugin-tags/m3u , das die Unterstützung hinzufügt.
Huntaub
0

Ich war mit dem Angebot nicht zufrieden. Hier ist mein Vorschlag mit 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>

Sie müssen nur das playlistArray bearbeiten und sind fertig

MrVaykadji
quelle
0

Um die aktuellen Antworten zu ergänzen, finden Sie hier eine Wiedergabeliste mit Videos, die mit separaten Untertiteldateien arbeiten. Am Ende der Wiedergabeliste wird endPage aufgerufen

<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>
Kelly Bang
quelle