Support the media attribute on source elements

[martinAnsty]

It seems that whilst Video.js will select the appropriate source file based on the supported filetypes and playback technology, it doesn't pay attention to the media attribute.

<video class="video-js vjs-default-skin" preload="none">
  <source src="http://player.vimeo.com/external/68603105.mobile.mp4" type='video/mp4' media="all and (max-width: 500px)"/>
  <source src="http://player.vimeo.com/external/68603105.sd.mp4" type='video/mp4' media="all and (max-width: 1200px)" />
  <source src="http://player.vimeo.com/external/68603105.hd.mp4" type='video/mp4' media="all and (min-width: 1201px)" />
</video>

The above should load the SD video (second source) when the browser window is between 500px and 1200px wide, but Video.js will always use the first (mobile) source because it is the first supported filetype.

I've seen some talk in the past of this being dropped from the spec, but as far as I can tell it's still in the latest editors draft.

[rowilsonh]

it's a shame. What it means 'media' good tool

[heff]

It may have been in the spec but for a long time none of the browsers were actually supporting it with HTML5 video. Does anyone know the current state of support for this in browsers?

I would love for this to be supported, so labeling as confirmed+unclaimed, incase someone wants to pick it up and work on it.

[SamEdwards-1]

In case someone is having this issue and comes here in the course of their googling, here's how I solved it using the videojs player ready callback function: ` function initVideo() {

  var player = this;

  function selectMedia() {
    if(!player.paused()) {
      return;
    }

    var playerId = player.el().id;
    var sourceList = document.querySelectorAll('#' + playerId + ' source');
    var matchedSource;
    if (sourceList.length > 1) {
      /*
          video source elements dont always support media queries,
          so check the source's media for a match and set the player's
          src accordingly.
        */
      sourceList.forEach(function (source) {
        var mediaQuery = source.media;
        if (mediaQuery && window.matchMedia(mediaQuery).matches) {
          matchedSource = source.src;
        }
      });
      if (matchedSource) {
        player.src(matchedSource);
      }
    }
  }

  window.addEventListener('resize', selectMedia);

  selectMedia();
}`

[chandarsunderraj]

@gkatsev is there a support for media in the 7.6.5 version ? By default it loads the first source, i would like to make it load its appropriate sources based on media breakpoint definitions.

[gkatsev]

This is not something we currently support.