HTML5 video field with multiple src elements?

[deandre212]

First off I'd like say that this a very nice cms and keep up the good work. I'm sure it will grow into something phenomenal.

I would like to know is it possible to have a html5 video field that uses multiple src elements and allows me to use the media attribute on the source element, which queries the browser to find out screen size (or number of colours, aspect ratio, and so on) and send different files that are optimised for different screen sizes?

Like so:

<video controls>

    <source src=hi-res.mp4 type='video/mp4; media="(min-device-width: 800px)">

    <source src=lo-res.mp4 type='video/mp4;>

    <source src=hi-res.webm type='video/webm; media="(min-device-width: 800px)">

    <source src=lo-res.webm type='video/webm;>

</video>

[Adam Kiss]

Hi deandre,

could you clarify a little? Because so far, it's pure HTML, so of course you can do that. Maybe you want to do that somehow specially [auto from fields? via tinymce?]

Adam

[ryan]

If you are wanting to support two different video sizes, I think your best bet is to just create 2 file fields to handle them (or 1 multi-file field, where you always assume the first is the largest/smallest, or something like that).

Lets assume you've created 2 file fields, and named them video_hi_mp4 and video_lo_mp4, and you've added these to your template that handles it. Here's how your template code would look:

<video controls>
     <?php 
     if($url = $page->video_hi_mp4->url) {
         echo "<source src='$url' type='video/mp4; media='(min-device-width: 800px)'>";
     }
     if($url = $page->video_lo_mp4->url) {
         echo "<source src='$url' type='video/mp4;'>";
     }
     ?>
</video>

You'd use the same method for your other video formats.

[deandre212]

Splendid and thanks for the reply! I'm really loving how lightweight and simplistic..yet powerful this cms is.

[ryan]

Thanks! Let us know how it works out with the videos.