HTML5 Internet Explorer 11 上的视频 (mp4) 没有全屏选项

Question

我正在使用常用控件 - play/pause、曲目、音量和全屏在网页上播放 HTML5 视频。这些视频是 mp4/ogg 格式。我的用户群中有 80% 使用 Internet Explorer 11（由 Google Analytics 提供），其余用户使用 Mozilla Firefox、Chrome 和 Safari。问题是 - 除了全屏控件之外的所有控件都不会出现在 IE11 上。在所有其他浏览器上都像魅力一样工作。

caniuse[dot]com/#feat=fullscreen 建议 IE11 具有本机全屏支持。

这是一个例子：

this 页面上的嵌入视频允许通过按钮全屏显示。

在元素上使用带有 'controls' 属性的相同代码不会在 IE11 上显示全屏选项。

Fiddle: http://jsfiddle.net/jaisfiddles/f1apusx3/

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

我错过了什么？我的印象是 IE11 启用了 msRequestFullscreen() api 代码。

Answer 1

我在一些网站上看到IE11不支持全屏！！！在版本 11 之前，它将不支持全屏 api。连IE10都没有全屏API！！因为它们是原生控件；他们不使用全屏 API.

Answer 2

我似乎自己偶然发现了解决方案。

我的 video 元素包含在 iFrame 中。为了使全屏选项可用，我指定了

<iframe allowfullscreen="true">

对于 Mozilla Firefox、Chrome 等其他主流浏览器，则没有必要。

参考 http://caniuse.com/#feat=fullscreen

上的已知问题

"IE 11 does not properly support fullscreen when opening from an iframe."

Answer 3

让我们从 chrome 打开并创建一个 redirect.html 作为；

http://~~/redirect.html?redirectUrl=<your adress>
redirect.html>>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="tr"> 

<head> 

<title>Please wait..Lütfen Bekleyiniz...</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript"> 
function openURL() { 
debugger; 
var url = getParameterByName("redirectUrl"); 

if (!url) 
return; 

if (msieversion()) { 
var shell = new ActiveXObject("WScript.Shell"); 
shell.run("Chrome " + url); 
window.open('', '_self', ''); 
window.close(); 
} 
else { 
window.location.href = url; 
} 
} 

function msieversion() { 

var ua = window.navigator.userAgent; 
var msie = ua.indexOf("MSIE "); 

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number 
{ 
return true; 
} 

return false; 
} 

function getParameterByName(name, url) { 
debugger; 
if (!url) url = window.location.href; 
// name = name.replace(/[\[\]]/g, "\$&"); 
// var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
name = name.replace(/[\[\]]/g, "\$&"); 
var regex = new RegExp("[?]" + name + "(=([^]*)||$)"), 
results = regex.exec(url); 
if (!results) return null; 
if (!results[2]) return ''; 
return decodeURIComponent(results[2].replace(/\+/g, " ")); 
} 
</script> 
</head> 

<body onload="openURL()"> 
</body> 

</html>

HTML5 Internet Explorer 11 上的视频 (mp4) 没有全屏选项

HTML5 Video (mp4) on Internet Explorer 11 has no fullscreen option

html

html5-video

internet-explorer-11

html5-fullscreen