Как создать плейлист HTML 5?

Привет < Мне было интересно узнать кто-нибудь о учебниках, описывающих, в частности, как создать видео-плейлист в HTML 5? Я также хотел бы, чтобы эти видеоролики воспроизводятся в произвольном порядке.Как создать плейлист HTML 5?

источник

2010-07-13 partrick mccreanor

http://tinyurl.com/29azteg - My Pick (http://www.bionicworks.com/php/generate-a-playlist-for-html5-video) – RobertPitt

возможно дубликат [HTML 5 видео или аудио плейлист] (http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist) – Quentin

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

источник

2012-10-20 06:19:25

он не работает в google chrome – Faisal

Я добавил атрибут автовоспроизведения и видео который автоматически начнет воспроизведение. проверить новую версию: http://jsfiddle.net/Barzi/Jzs6B/2404/ –

есть ли способ добавления субтитров и автоматического воспроизведения следующего видео в списке? я не знаю, как добавить их в https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video большое спасибо за этот хороший пример – wiak

 You can use this . perfect and easily  

     <html> 
<head></head> 
<style type="text/css"> 
    #media{ 
     background-color:#000; 
     color:#fff; 
     float:left; 
     width:640px; 
     height:400px; 
    } 
    #button_container{ 
     float:left; 
    } 
    .media_item{ 
     padding:15px; 
     border:1px solid #aaa; 
     background-color:#ccc; 
     cursor:pointer; 
     width:200px; 
     margin:4px 0px 0px 4px; 
     -moz-border-radius:5px; 
     -webkit-border-radius:5px; 
    } 
</style> 
<body> 
    <div id="media"> 
     <p>Some Default Content Should Be Here</p> 
    </div> 
    <div id="button_container"> 
     <div class="media_item" id="/mymovie.mov"> 
      My Movie 4:26 
     </div> 
     <div class="media_item" id="/anothermovie.mov"> 
      Another Movie 5:22 
     </div> 
    </div> 
    <script type="text/javascript"> 
     function update_source(src){ 
      document.getElementById('media').innerHTML = '<h2>'+src+' Loaded<h2><object height="400" width="640" id="" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" class="quicktime"> \ 
        <param value="'+src+'" name="src"> \ 
        <param value="false" name="showlogo"> \ 
        <param value="tofit" name="scale"> \ 
        <param value="true" name="saveembedtags"> \ 
        <param value="true" name="postdomevents"> \ 
        <embed height="400" width="640" src="+src+" type="video/quicktime" postdomevents="true" controller="false" showlogo="false" scale="tofit"> \ 
         <param value="false" name="controller"> \ 
         <param value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg" name="posterframe"> \ 
         <param value="false" name="showlogo"><param value="true" name="autostart"> \ 
         <param value="true" name="cache"> \ 
         <param value="white" name="bgcolor"> \ 
         <param value="false" name="aggressivecleanup"> \ 
        </embed> \ 
        <param value="false" name="controller"> \ 
        <param value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg" name="posterframe"> \ 
        <param value="false" name="showlogo"> \ 
        <param value="true" name="autostart"> \ 
        <param value="true" name="cache"> \ 
        <param value="black" name="bgcolor"> \ 
        <param value="false" name="aggressivecleanup"> \ 
       </object>'; 
     } 

     var container = document.getElementById('button_container'); 
     var buttons = container.getElementsByTagName('div'); 
     for(var i = 0; i < buttons.length; i++){ 
      buttons[i].setAttribute('onclick', 'update_source(this.id)'); 
     } 
    </script> 
</body> 
     </html>

источник

2013-09-14 07:18:38 user2731816

ответ

Смежные вопросы