CODEWITHSUNDEEP
javascripthtmlvideoresponsive-design
Jason Lydon
Jason Lydon

Reputation: 7180

Responsive HTML5 Video Tag, multiple queries

I'm trying to use the media attribute in the source tag in some html5 video. Firefox loads each of the correct three sized videos on page load, but Chrome is loading the small video on all page widths. Scroll to the right in the code if you can't see the media attribute.

The video tag uses js to choose the appropriate poster depending on page width. In case you're wondering what is going on there.

I use CSS to make the video tag fluid, but I'm trying to spare the large download for non-desktop users (based on page width).

I've seen a few things that the media attribute may not be supported and was wondering if that is why this fails in Chrome or if I'm doing it wrong. Or if I should try to just accomplish this using javascript and swap out the src attribute in the source tag.

If the media attribute isn't supported, can someone link me up, or even send a LetMeGoogleThatForYou link if you want to humble me.

<video poster="" data-posterlarge="poster.jpg" data-postermedium="poster-medium.jpg" data-postersmall="poster-small.jpg" controls>         
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video-small.webm" media="all and (max-width:480px)"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video-small.mp4" media="all and (max-width:480px)"></source>
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video-medium.webm" media="all and (min-width:480px) and (max-width:800px)"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video-medium.mp4" media="all and (min-width:480px) and (max-width:800px)"></source> 
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video.webm"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video.mp4"></source>
  <small>THIS BROWSER DOES NOT HAVE NATIVE VIDEO SUPPORT</small>
</video>

Thanks

Upvotes: 0

Views: 1968

Answers (1)

Christopher Esbrandt
Christopher Esbrandt

Reputation: 1198

Since the content of you source tags are all identical, except for the sizes, the below code just combines and simplifies what is displayed.

If you need, I can make a jQuery version, but here's a pure-JS solution:

function size() {
 var width = window.innerWidth, size = '', source;
 if(width <= 480)
  size = '-small';
 else if(width > 480 && width <= 800)
  size = '-medium';
 source = '<source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video' + size + '.webm" media="all and (max-width:480px)"></source><source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video' + size + '.mp4" media="all"></source><small>THIS BROWSER DOES NOT HAVE NATIVE VIDEO SUPPORT</small>';
 document.getElementById('video').innerHTML = source;
}

Then, remove all the code from the video tag, so all you have in the body is:

<video poster="" data-posterlarge="poster.jpg" data-postermedium="poster-medium.jpg" data-postersmall="poster-small.jpg" controls id="video"></video>

You'd call it onload by adding onload="videoSize()" to the body tag. Due to my lack of knowledge on how-to use JSFiddle, I had to load it using their built-in system: http://jsfiddle.net/x8h5ebq6/2/

I added an id to the video tag, but you can leave that off if you swap document.getElementById('video').innerHTML for document.getElementsByTagName('video')[0].innerHTML, the [0] corresponding to the instance on the page of the video tag you want the script to target. It can be seen at: http://jsfiddle.net/x8h5ebq6/1/

Upvotes: 1

Related Questions