HTML 5 видео или аудио плейлист

Question

Могу ли я использовать тег <video> или <audio>, чтобы воспроизвести плейлист и управлять ими?

Моя цель - узнать, когда видео/песня закончена, чтобы играть, и сделать следующее и изменить ее громкость.

Answer 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

Answer 2

Невозможно определить плейлист, используя только тег <video> или <audio>, но есть способы контролировать их, чтобы вы могли имитировать список воспроизведения с использованием JavaScript. Ознакомьтесь с разделами 4.8.7, 4.8.9 (особенно 4.8.9.12) от HTML5 spec. Надеемся, что большинство методов и событий реализовано в современных браузерах, таких как Chrome и Firefox (последние версии, конечно).

Answer 3

Это было сделано там: http://www.jezra.net/projects/pageplayer

Answer 4

Yep, вы можете просто указать свой 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 

----- UPDATE -----

Ну, получается плейлист m3u файлов является поддерживаются iPhone, но не на многое другое, в том числе на Safari 5, что печально. Я не уверен в телефонах Android, но я сомневаюсь, что они поддерживают его, поскольку Chrome не делает этого. Извините за дезинформацию.

Answer 5

Вы должны взглянуть на Popcorn.js - в яваскрипта рамки для взаимодействия с html5: http://popcornjs.org/documentation

Answer 6

jPlayer является свободным и открытым исходным кодом HTML5 аудио и видео библиотеки, которые могут оказаться полезными.Он поддерживает плейлисты построен в: http://jplayer.org/

Answer 7

Я создал скрипку 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> 

Во-вторых, ваш код JavaScript через библиотеку JQuery будет выглядеть так:

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

Answer 8

Я не был доволен тем, что было предложено, так вот мое предложение, с помощью 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 массив, и все готово

Answer 9

Я оптимизировал код javascript из cameronjonesweb немного. Теперь вы можете просто добавить клипы в массив. Все остальное делается автоматически.

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>