Video.js: Windows 7 and IE11

[Tralapo]

Description

This issue is kind of weird, because I don't have the opportunity to test the problem myself. I hope it's ok and somebody is able to help me.

After upgrading to Video.JS 6 recently, I got complains from my visitors. They said the streams on my website don't work anymore in Internet Explorer 11 on Windows 7.

I tested them on Windows 10 in every browser, including IE11, and saw no problems. I don't have a PC with Windows 7 and don't know anybody with Windows 7 installed, so I don't have the options to try it myself and see exactly what the console says. They say they see 'No compatible source found' on the screen.

I made two reduced test cases, which I emailed to one of the visitors that complained to me. He could verify the one with Video.JS v6 didn't work for him either.

The streams I use are HLS, so videojs-contrib-hls is included, but switching the version of the plugin doesn't seem to make any difference, so I think that one can be ruled out.

Switching back to Video.JS v5.20 fixes the problem, so it definitely seems to be related to v6.2. I hope somebody can help me point in the right direction with this problem.

Test case VideoJS v5.20, working everywhere: --removed--
Test case VideoJS v6.2, not working in W7 IE11: --removed--

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Test in W7 IE11
2. Test in W10 IE11 and/or any other browser

Results

Expected

The stream would work in every browser.

Actual

The stream doens't work in IE11 on W7, it does work with IE11 on W10.

Error output

No compatible source found.

Additional Information

versions

videojs

v5.20, v6.2

browsers

IE11 W7

OSes

Windows 7

plugins

videojs-contrib-hls

[onigetoc]

Your right, both video on pastebin do not work in Windows 7 with IE 11

[Tralapo]

@onigetoc Both? The 5.20 version should work fine?

[syagawa]

IE11 on Win10 and IE11 on Win7 are similar but different.
IE11 on Win10 does not need Flash, but IE11 on Win7 need Flash.

In Version 6.x of video.js, Flash no longer supports by default.
So, you need to load videojs-flash.

And you have to explicitly write "techOrder": ["flash"] or "techOrder": ["html5", "flash"] in videojs option.

The following is a reference link
https://github.com/videojs/video.js/pull/3956
https://github.com/videojs/video.js/issues/4377

[gkatsev]

I believe that @syagawa is correct in that you need to include videojs-flash and things will probably work.
Though, I'm not sure that setting the techOrder manually is necessary. Video.js should add it to the default tech order for you.

[Tralapo]

Thanks all, will try that. I had to build it first, the file isn't included in the release like with videojs-contrib-hls.

Is somebody maybe able to test this new test case in W7 IE11?

• v6.2 without Flash plugin, from original post: --removed--
• v6.2 with Flash plugin included. This should be the fix for W7/IE11? --removed--

[syagawa]

Both do not work on IE 11 on Win7.
Both are displayed as "No compatible source was found for this media.".

JS bin may not support IE11 video play, but I do not know the specification of JS bin.

[mister-ben]

Flash doesn't work in jsbin because of the way they sandbox the iframe, unless you jump out of the frame by clicking on ↗.

I can't look at this right now but you could also use something like browserstack.com to test.

[onigetoc]

I have proof that it's happen everywhere on my website, so there's nothing to do with jsbin alone.
https://github.com/videojs/video.js/issues/4604

[Tralapo]

I created a new reduced test case, outside of JSbin. Is it possible for somebody to check if it works in W7 IE11?

• v6.2 including Flash plugin: --removed--

@mister-ben The free version/trial of Browserstack doesn't include Internet Explorer.

[onigetoc]

Hard to tell, often a normal webpage will have a lot of content, javascript ect. The last demo work
It is better to put javascript in the footer or header?

Thank's

[Tralapo]

@onigetoc Can you explain what is hard to tell? Does the stream work, or doesn't it?

[onigetoc]

@Tralapo your demo work but i mean that it may not work on heavy website with lot of javascript may be.

[syagawa]

I visited http://bit.ly/2fgjTRW on IE 11 on Win 7.
But, "No compatible source was found for this media." Was displayed.

I checked the source code, videojs-flash was loaded after videojs-contrib-hls.
Load videojs-flash before load videojs-contrib-hls.
It is written as follows.
https://github.com/videojs/videojs-contrib-hls/blob/2d9b3ad905ab1796815d2f24bd3af004afdfa9b8/README.md#videojs-6

Also, this video seems to be playing live video,
Why do not you try the source that videojs-contrib-hls official page is using?
https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8

[onigetoc]

@syagawa And on version 5 with videojs contrib, is there a better order, I have the Youtube plugin too. and others plugins.

[mister-ben]

As @syagawa says, that example would work if Flash were added before contrib-hls.

If you're having issues with this on more "complex" sites, it may help to not use data-setup and initialise the player with the videojs() constructor only after you have loaded the plugin scripts.

[Tralapo]

@syagawa Because this is the video that has tot work for me in the end, so best to test with it.

I did not see that in the readme. Changed the order now, are you able to check again?

[syagawa]

I visited the page on IE 11 on Win 7.
Oh, live video was played :smile:

As @mister-ben says, I think too that using videojs() constructor way is better.

[Tralapo]

Thanks! Then I can close this issue, as I know now what the problem was. Thanks everyone.