Video preloads on Internet Explorer even when preload="none"

[markmanx]

Description

Video partially preloads on IE9 and greater, even when including the attribute preload="none" in the video tag. A test case can be found here. Check for video data packets being transferred when the window loads.

Steps to reproduce

1. Open link above in IE 9, 10 or 11.
2. Refresh window (make sure cache is clear before refresh).
3. Use a packet monitor to observe video data being partially downloaded before video is started.

Results

Expected

No video data transferred at all until the user interacts with the player. This is the case for Chrome (both desktop and Android), FF, Safari (desktop and iOS). It's just IE that seems to be affected (not sure about Edge).

Actual

Computer blew up, pieces of circuit board everywhere.
Not really. Just partial download of the video.

Error output

No errors in console.

Additional Information

Tested with Videojs 5.14.1

Browsers affected: IE9, 10, 11

Windows 7

No plugins

[mister-ben]

Video.js doesn't control these network requests - it's up to the browser to honour the preload attribute. Note that the preload values are defined in the spec as "hints" so IE isn't technically "wrong" if it decides to ignore it and do its own thing. I'm fairly sure IE does honour preload="none" in some circumstances though.

[gkatsev]

It sounds like this is a browser bug and not anything we can fix. Marking it as such and closing. If we get more info and it turns out it's something else, we can re-open to take another look at it.

[markmanx]

Hi gkatsev,

It's definitely an issue with videojs. I've made a demo with nothing more than a static <video> tag using preload="none". Check it out, nothing is preloaded at all: demo using static <video> tag.

Compare that to a videojs demo, you'll see roughly half a meg of video being preloaded, with the exact same setup as above.

Going deeper into the problem, here's the first demo again (which works correctly), but this time with the <video> tag generated dynamically: dynamic video demo. The video preloads in this case. It looks like IE ignores preload="none" when the video tag is dynamically inserted into the document (I beleive this is how videojs works).

Last demo (I promise). Here's the same setup as above, with a static <video> tag but dynamically generated <source> tag. IE works correctly and does not preload anything. Demo with dynamic source tag.

My conclusion is that the <video> tag needs to be on the page when the document is loaded for preload="none" to work correctly in IE. I think that videojs adds the video tag in dynamically, or at least appends it to a wrapper div which might have the same effect as removing and then re-adding it to the DOM. Are you able to confirm?

Thanks

[gkatsev]

I mean, if IE requires the video to be static for preload=none to work, that still points at a browser bug.

We recently added a feature for "ingesting a player div" that could potentially be used as a workaround. Since we don't need to create a new video element, we stick with the one that is available. Basically, the embed code changes from just a video element to something like:

<div data-vjs-player>
  <video controls preload="none">
</div>

[andreinitescu]

@markmanx @gkatsev
There are scenarios where <video> is created dynamically. For example I'm using Knockout to create <video> tags in a KO for-each loop.

The "Ingesting player div" feature doesn't help, because <video> is created dynamically.
Any workarounds?

For the "preload: none" case, does video-js have a feature to dynamically create <video> when user clicks on the play button of a <div>?