How to build a HTML 5 video playlist?

Question

Hi< I was wondering would anybody know of tutorials describing, in detail, how to build a video playlist in HTML 5? I also would like these videos to play in a random order.

http://tinyurl.com/29azteg - My Pick (http://www.bionicworks.com/php/generate-a-playlist-for-html5-video) — RobertPitt, Jul 13 '10 at 12:09
possible duplicate of [HTML 5 video or audio playlist](http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist) — Quentin, Jul 13 '10 at 12:16

score 9 · Answer 1 · answered Oct 20 '12 at 06:19

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

I've added autoplay attribute and a video that will automatically start playing. check new version: http://jsfiddle.net/Barzi/Jzs6B/2404/ — Maziar Barzi, Dec 13 '17 at 18:08
is there a way to add subtitles and auto play next video in list? i have no clue how to add those in https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video big thanks for this nice example — nwgat, Feb 04 '18 at 14:30

score 0 · Answer 2 · edited Jan 19 '19 at 20:45

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>

James Card · Answer 3 · 2022-05-02T14:59:26.887

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.

How to build a HTML 5 video playlist?

3 Answers3