当前位置：文江博客话题详情

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

发布于 2024-09-09 05:23:30 字数 65 浏览 2 评论 0原文

嗨<我想知道有人知道详细描述如何在 HTML 5 中构建视频播放列表的教程吗？我还希望这些视频以随机顺序播放。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

惜醉颜 2024-09-16 05:23:31

我在这里为此创建了一个 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;
}

I created a JS fiddle for this here:

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

First, your HTML markup looks like this:

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

Second, your JavaScript code via JQuery library will look like this:

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

And last but not least, your 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;
}

回复收藏 0 原文

我的鱼塘能养鲲 2024-09-16 05:23:31

你可以用这个。
完美且轻松。

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

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>

回复收藏 0 原文

西瑶 2024-09-16 05:23:31

不使用任何框架或 CSS 直接回答问题：

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <select class="form-control" id="videoSelection"
            onchange="updateSource(this.value);"
        >
            <option>file1.mp4</option>
            <option>file2.mp4</option>
            <option>file3.mp4</option>
            <option>file4.mp4</option>
            <option>file5.mp4</option>
    </select>
        <br />
        <video allowfullscreen controls autoplay muted id="video">
        </video>
        <script type="text/javascript">
            function updateSource(currentSource) {
                var videoSources = document.getElementById('videoSelection').options;
                var nextSource = videoSources[Math.floor(Math.random() * videoSources.length)].text;
                for (var i = 0; i < videoSources.length - 1; i++) {
                    if (videoSources[i].text == currentSource) {
                        break;
                    }
                }
                videoSources[i].selected = true;
                document.getElementById('video').src = currentSource;
                document.getElementById('video').onended = function() {updateSource(nextSource)};
            }
        </script>
    </body>
</html>

只需在 select 中定义文件即可。页面加载时选择一个文件，它将从可用选项中随机选择下一个视频。

To directly answer the question without any frameworks or CSS:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <select class="form-control" id="videoSelection"
            onchange="updateSource(this.value);"
        >
            <option>file1.mp4</option>
            <option>file2.mp4</option>
            <option>file3.mp4</option>
            <option>file4.mp4</option>
            <option>file5.mp4</option>
    </select>
        <br />
        <video allowfullscreen controls autoplay muted id="video">
        </video>
        <script type="text/javascript">
            function updateSource(currentSource) {
                var videoSources = document.getElementById('videoSelection').options;
                var nextSource = videoSources[Math.floor(Math.random() * videoSources.length)].text;
                for (var i = 0; i < videoSources.length - 1; i++) {
                    if (videoSources[i].text == currentSource) {
                        break;
                    }
                }
                videoSources[i].selected = true;
                document.getElementById('video').src = currentSource;
                document.getElementById('video').onended = function() {updateSource(nextSource)};
            }
        </script>
    </body>
</html>

Just define the files in the select. Choose a file when the page loads and it will randomly select the next video from the available options.

回复收藏 0 原文

~没有更多了~