2

こんにちは < HTML 5 でビデオ プレイリストを作成する方法を詳細に説明しているチュートリアルを知っている人はいますか? また、これらのビデオをランダムな順序で再生したいと思います。

4

2 に答える 2

9

ここでこれ用の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>

次に、JQuery ライブラリを介した JavaScript コードは次のようになります。

$(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-20T06:19:25.163 に答える
0

これを使用できます。 完璧で簡単。

<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-14T07:18:38.310 に答える