HTML5 Video (mp4) в Internet Explorer 11 не имеет полноэкранного режима
Я играю с HTML5-видео на веб-странице с обычными элементами управления - воспроизведение / пауза, трек, громкость и полноэкранный режим. Эти видео имеют формат mp4/ogg. 80% моей пользовательской базы используют Internet Explorer 11 (любезно предоставлен Google Analytics), а остальные - Mozilla Firefox, Chrome и Safari. Проблема в том, что все элементы управления, кроме полноэкранного, не отображаются в IE11. Работает как шарм во всех других браузерах.
caniuse [точка]com/#feat=fullscreen предполагает, что IE11 имеет встроенную поддержку полноэкранного режима.
Вот пример:
Встроенное видео на этой странице позволяет полноэкранный режим с помощью кнопки.
Использование того же кода с атрибутом "controls" для элемента не отображает полноэкранный параметр в IE11.
Скрипка: 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 включен API-код msRequestFullscreen().
2 ответа
Казалось, я сам наткнулся на решение.
мой video
элемент содержался внутри iFrame
, Чтобы сделать полноэкранный вариант доступным, я указал
<iframe allowfullscreen="true">
С другими крупными браузерами, такими как Mozilla Firefox, Chrome и т. Д., В этом не было необходимости.
См. Известные проблемы на http://caniuse.com/
"IE 11 неправильно поддерживает полноэкранный режим при открытии из iframe".
Я видел на каком-то сайте, что IE11 не поддерживает полноэкранный режим!!! Он не будет поддерживать полноэкранный API до версии 11. Даже IE10 не имеет полноэкранного API! Потому что они являются родным контролем; они не используют полноэкранный API.
Пусть открывается из chrome с созданием redirect.html as;
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>