{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 迷人小祖宗 的问题《HTML5 video and audio not working》','https://www.manongdao.com/q-837660.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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-Compatibleneeds to be updated toIE=edgeand the<frame>should be removed.Unfortunately, I don't know of anyway to override the
X-UA-Compatibletag. I believe, (though not 100% certain) that IE sees theX-UA-Compatibletag 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.
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.