2

Backstory:
I have just spent an entire day trying to work out why my HTML5 video and audio tags haven't been working in IE11 and IE10 when I upload them to a particular LMS (Works perfectly in every other browser).
I stripped it right back so that now this is everything that is in the HTML file.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>
<body>
    <video controls>
        <source src="video.mp4" height="450px" width="800px"/>
    </video>
</body>
</html>

Very simple as you can see, works locally in IE11 and IE10, and the files are definitely on the LMS as I can link to them. It is only when they are in HTML5 video tags that nothing appears - literally a white screen.

The Issue:
When the content is loaded by the LMS, there are a series of nested frames, as seen below. (note that I removed all inline properties {there are heaps}).

<html>
<head></head>
<frame>
    <frame>
        <frame>
            // This is where my HTML lives.

In the top head tag, which I can't alter, lies this bad boy: <meta http-equiv="X-UA-Compatible" content="IE=8">. Now I may be incorrect, but I think this is the source of the issue, as ie8 document standard would be negating any HTML5 tags...?

The Question:
Is there any way to over-write this meta tag with <meta http-equiv="X-UA-Compatible" content="IE=edge"> ?
Or subsequently, can I reconfigure the document standards / mode, without refreshing the page (refreshing automatically closes the window {LMS/SCORM function}), either within my frame or above with javascript etc..? Or do I need to try and get the LMS Tech peeps to alter their source code?

Update:
Noticed the following when I add <meta http-equiv="X-UA-Compatible" content="IE=8"> The DOM changes from the original to: 

<video controls></video>
    <source src="video.mp4" height="450px" width="800px"/>
</video><//video>
Zze
  • 18,229
  • 13
  • 85
  • 118
  • See some suggestions here: http://stackoverflow.com/questions/15639444/how-do-i-get-a-html5-video-to-work-using-ie10 – Papa Aug 28 '15 at 04:14
  • Thanks @Papa, I hadn't come across that ref in my searching, however all of those checkout for me, and I can get the page to work locally and when on a server... I can also get all the videos to load if they are in an swf so the mime types are also accurate. I'm pretty certain its the x-ua-compatible meta tag! - But appreciate your suggestion :). – Zze Aug 28 '15 at 04:20

2 Answers2

1

The real answer here is you really should contact the LMS tech people. They really need to update their code as it is really outdated.

I ran a few test using the <meta http-equiv="X-UA-Compatible" content="IE=8"> and I ran into issues with the video loading. (I was testing in IE 11.) With that said, I also believe there are issues with the <frame> tag as well.

The X-UA-Compatible needs to be updated to IE=edge and the <frame> should be removed.

Unfortunately, I don't know of anyway to override the X-UA-Compatible tag. I believe, (though not 100% certain) that IE sees the X-UA-Compatible tag in the parent document and uses that.

If you cannot get the LMS tech people to update their code in a timely manner, you can try a few options. I do not know if these will solve your problems, but worth a try.

  • Upload the video to YouTube or similar video hosting service and embed to video using the iFrame.

  • If you cannot use a video hosting service for some reason, try hosting the video on a server you control and again, embed the video using an iFrame.

  • Try using mediaelement.js in the site as a workaround to solve compatibility issues.

Again, the real solution is to get LMS to update their code, otherwise, you have to find some workaround that works.

L84
  • 45,514
  • 58
  • 177
  • 257
  • Thank you so much for coming over and checking out my issue! I will be sure to contact the LMS team as hosting all our videos isn't an ideal for this current project. Thanks again! I'll return and with an update as soon as I have contacted them. – Zze Aug 29 '15 at 01:13
  • They are going to change the tag! - Thank you! – Zze Sep 02 '15 at 22:17
  • @Zze - Good to hear. => – L84 Sep 03 '15 at 04:55
0

Your actual problem is that you are using the obsolete and removed from HTML <frame> element. Browsers have stopped supporting this tag. You should try to convert it to <iframe> instead.

From my tests, the <meta http-equiv="X-UA-Compatible" content="IE=8"> won't block your browser to load the video element.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Interesting, so you're saying it isn't the fact that they are forcing IE8 legacy mode, its actually because of the frames? Downside is that its a very restricted environment that our HTML is being loaded into... I would have to contact the LMS company and get them to change this, if it were the case! – Zze Aug 28 '15 at 08:01
  • Well that's what appeared from my tests, and I am sure that `` element has been removed from web standards for security reasons. You can check yourself by just trying to display some text, that won't interfer with any Compatibilty Mode – Kaiido Aug 28 '15 at 08:03
  • I have added an update to the question, I can't seem to replicate it with the `frame` it just removes it from the DOM when I add one in the HTML..? I really appreciate the help. I have zipped up a small test video and a single html file here https://www.dropbox.com/s/8yq9lx9xtk59kz2/XUA_Test.zip?dl=0 if you are interested,.. I can only still replicate my issue when i add `X-UA-Compatible IE8` and close and reopen the tab / window. Very much appreciate the help. – Zze Aug 28 '15 at 08:32