Question

trying to do a really basic player for testing as we’re having some issues with html5 video & javascript.

I always presumed something like;

    <video controls>
        <source src="/media/uploads/2010/09/1527/7_bbc-radio-1-hq.mov"></source>
        <source src="/media/uploads/2010/10/1557/7_costa-monkeys.mov"></source>
    </video>

would be understood as a playlist but doesn’t work and can’t find anything to suggest this or anything else would.

IS it possible to create a playlist just using html5 markup?

best, Dan.

Answer 1

The browser will select the first source it is capable of playing. The point of having multiple sources is so that you can provide the same video at different encodings and bitrates.

Currently it is not possible to create a playlist just using markup. The only way I can think of which might simulate it would be to use the :target pseudo class in CSS:

<style>
video { display:none; }
video:target { display: inline-block; }
</style>
<ul>
    <li><a href="#one">First video</a></li>
    <li><a href="#two">Second video</a></li>
</ul>
<video controls id="one">
    <source src="/media/uploads/2010/09/1527/7_bbc-radio-1-hq.mov"></source>
</video>
<video controls id="two">
    <source src="/media/uploads/2010/10/1557/7_costa-monkeys.mov"></source>
</video>

Where this falls down is that users will have to stop and start the videos manually, as well as click the links to navigate between them.