Lista odtwarzania wideo lub audio HTML 5

Question

Czy mogę użyć znacznika <video> lub <audio> do odtwarzania listy odtwarzania i kontrolowania ich?

Moim celem jest wiedzieć, kiedy film/utwór zakończył się, aby odtworzyć i zrobić następny, i zmienić jego głośność.

Answer 1

można załadować następny klip w onend imprezy jak ta

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

Więcej informacji here

Answer 2

Nie można zdefiniować listy odtwarzania przy użyciu tylko znacznika <video> lub <audio>, ale istnieją sposoby ich kontrolowania, aby można było symulować listę odtwarzania przy użyciu JavaScript. Sprawdź sekcje 4.8.7, 4.8.9 (zwłaszcza 4.8.9.12) z HTML5 spec. Mam nadzieję, że większość metod i wydarzeń jest wdrażana w nowoczesnych przeglądarkach takich jak Chrome i Firefox (oczywiście najnowsze wersje).

Answer 3

to stało tam: http://www.jezra.net/projects/pageplayer

Answer 4

Tak, można po prostu wskazać tag src do plik listy odtwarzania .m3u. Plik m3u jest łatwy do skonstruowania -

#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 

----- AKTUALIZACJA -----

Cóż, okazuje się, odtwarzania plików m3u są obsługiwane na iPhone, ale nie na wiele innych, w tym Safari 5, który jest trochę smutny. Nie mam pewności co do telefonów z Androidem, ale wątpię, by je obsługiwały, ponieważ Chrome tego nie robi. Przepraszam za dezinformację.

Answer 5

Należy przyjrzeć Popcorn.js - ramy JavaScript do interakcji z HTML5: http://popcornjs.org/documentation

Answer 6

JPlayer to darmowy i open source HTML5 audio i wideo biblioteki, które mogą okazać się przydatne.Posiada wsparcie dla odtwarzania wbudowany w: http://jplayer.org/

Answer 7

stworzyłem skrzypiec JS do tego tutaj:

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

Po pierwsze, znaczników HTML wygląda następująco:

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

drugie, Twój kod JavaScript za pośrednictwem biblioteki JQuery będzie wyglądał następująco:

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

I last but not least, Twój 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; 
}​ 

Answer 8

I nie był zadowolony z tego, co zaoferowano, więc tutaj jest moja propozycja, przy użyciu 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> 

Trzeba tylko edytować playlist array, i gotowe

Answer 9

Zoptymalizowałem kod javascript z cameronjonesweb. Teraz możesz po prostu dodać klipy do tablicy. Cała reszta odbywa się automatycznie.

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(){ 
 
\t \t ++curVideo; 
 
    if(curVideo < nextVideo.length){  \t \t 
 
     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>