CODEWITHSUNDEEP
htmlinternet-explorer
Zze
Zze

Reputation: 18805

HTML5 video and audio not working

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>

Upvotes: 2

Views: 1021

Answers (2)

L84
L84

Reputation: 46308

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.

Upvotes: 1

Kaiido
Kaiido

Reputation: 136638

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.

Upvotes: 0

Related Questions