0

I want to serve two files. A low res for mobile and high res for desktops and tablets.

I've seen it suggested here and here (see: Sending Differently-Compressed Videos to Handheld Devices) to use a media query. I've found this works with a plain <video> tag but not with mediaelement.js

<video width="960" height="540" controls="controls" preload="none">
    <source type="video/mp4" src="mobile.mp4" media="all and (max-width:600px)">
    <source type="video/mp4" src="desktop.mp4">
</video>
<script>jQuery('video').mediaelementplayer();</script>

(note: code simplified for clarity)

How can I get mediaelement.js to listen to the media query or is there another method?

Thanks

Community
  • 1
  • 1
bostondv
  • 415
  • 4
  • 8

1 Answers1

0

It seems that in function setSrc() in https://github.com/johndyer/mediaelement/blob/master/src/js/me-mediaelements.js

mediaelement.js replace video's source tag with src attribute, but doesn't take care of the media query option.

Leon
  • 2,810
  • 5
  • 21
  • 32