Question

您好＆LT;我想知道是否有人知道如何在HTML 5中构建视频播放列表的教程？我也希望这些视频以随机顺序播放。

Answer 1

我在这里创建了一个JS小提琴：

首先，您的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;
}

Answer 2

你可以用它。 完美且轻松。

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

如何构建HTML 5视频播放列表？

2 个答案: