Jump to content

HTML5 video field with multiple src elements?


deandre212
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...