Comment créer une liste de lecture vidéo HTML 5?

Salut < Je me demandais quelqu'un serait au courant des tutoriels décrivant, en détail, comment construire une playlist vidéo en HTML 5? Je voudrais aussi que ces vidéos jouent dans un ordre aléatoire.Comment créer une liste de lecture vidéo HTML 5?

Source

2010-07-13 partrick mccreanor

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

double possible [HTML 5 liste de lecture vidéo ou audio] (http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist) – Quentin

J'ai créé un violon JS pour cette ici:

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

Tout d'abord, votre balisage HTML ressemble à ceci:

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

Deuxièmement, votre code JavaScript via la bibliothèque JQuery ressemblera à ceci :

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

Et last but not least, votre 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; 
}

Source

2012-10-20 06:19:25

il ne fonctionne pas dans google chrome – Faisal

J'ai ajouté l'attribut autoplay et une vidéo cela commencera automatiquement à jouer. vérifier la nouvelle version: http://jsfiddle.net/Barzi/Jzs6B/2404/ –

Y at-il un moyen d'ajouter des sous-titres et lire automatiquement la vidéo suivante dans la liste? Je n'ai aucune idée comment les ajouter dans https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video grand merci pour ce bel exemple – 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>

Source

2013-09-14 07:18:38 user2731816

Comment créer une liste de lecture vidéo HTML 5?

Répondre

Questions connexes