Wie Baue ich eine HTML 5 video playlist?

Hallo< ich Frage mich, würde jemand, der tutorials, die beschreiben, im detail, wie man eine video playlist in HTML 5? Ich würde auch gerne diese videos zu spielen in einer zufälligen Reihenfolge.

tinyurl.com/29azteg - Mein Pick (bionicworks.com/php/generate-a-playlist-for-html5-video)
mögliche Duplikate von HTML 5 video-oder audio-Wiedergabeliste

InformationsquelleAutor partrick mccreanor | 2010-07-13

Erstellte ich eine JS-fiddle für das hier:

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

Zuerst, Ihre HTML-markup sieht wie folgt 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>

Zweiten, den JavaScript-code via JQuery-Bibliothek wird wie folgt Aussehen:

$(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 nicht zuletzt Ihre 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;
}

es läuft nicht in google chrome
Ich habe autoplay-Attribut und ein video, das automatisch abgespielt. überprüfen Sie die neue version: jsfiddle.net/Barzi/Jzs6B/2404
gibt es eine Möglichkeit, Untertitel hinzufügen-und auto-play nächsten video in der Liste? ich habe keine Ahnung, wie Sie diese in den developer.mozilla.org/en-US/Apps/Fundamentals/..., vielen Dank für dieses schöne Beispiel

InformationsquelleAutor Maziar Barzi

Können Sie diese verwenden.
perfekt und einfach.

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

InformationsquelleAutor user2731816

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.