У меня есть веб-страница, закодированная в html5 с использованием тегов, таких как header
, footer
, section
и video
. Я использую modernizr для поддержки этих тегов в IE 7 и IE 8.Видео для всех с modernizr не работает?
На странице есть видеоролик, содержащий флэш-резерв (видео для всех).
Когда я тестирую страницу в IE 8, страница хорошо отображается, включая теги, специфичные для html5.
Проблема в том, что вспышка для видео не работает. У меня есть черная область, а не флеш-плеер.
Он работает только в том случае, если я удаляю тег сценария для загрузки modernizr. Если я создаю пользовательскую версию modernizr без html5-шайбы, загружается флеш-плеер, и я могу воспроизводить видео, но теги html5 не распознаются.
Как я могу использовать видео для всех с помощью модернизации modernizr/html5? Почему это не работает?
Спасибо за вашу помощь
Update:
Чтобы идти дальше в деталях, моя страница основана на html5boilerplate и использовать mediaelementsjs для игрока.
Вот HTML код
<head>
...
<script src="js/libs/modernizr-2.0.6.min.js"></script>
...
</head>
<body>
...
<video width="332" height="250" poster="img/poster.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="video/myvideo.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="video/myvideo.webm" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="332" height="250" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="flashVars" value="config={'playlist':['http://.../img/poster.jpg',{'url':'http://.../video/myvideo.mp4','autoPlay':false}]}">
<!-- Image as a last resort -->
<img src="img/poster.jpg" width="320" height="240" title="Your browser doesn't support video" />
</object>
</video>
...
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
</body>
И что в script.js
$(function() {
if($.browser.msie && $.browser.version.substr(0,1)<=7) {
// $("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']});
}
else {
// initialize scrollable
$(".scrollable").scrollable({circular: true, mousewheel: true}).navigator();
$("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']});
}
});
plugins.js файл содержит код MediaElement-и-player.min.js https://github.com/johndyer/mediaelement/blob/master/build/mediaelement-and-player.js
Он работает в IE 8, только если я прокомментирую строку для загрузки modernizr.
Если вы включили какой-то код или разместите его здесь http://jsfiddle.net/, это поможет людям помочь вам .... – ManseUK
Кажется немного запутанным, зачем использовать MediaElementJs, если вы вручную указываете проигрыватель Flash Flashback и используя другого игрока? MEJS - это прокладка, которая включает в себя компонент Flash ... во всяком случае, не так ли, потому что SWF, который вы включаете, может быть не в одном домене? Кроме того, не проверяет ли в MSI и версии проверку скрипта в первую очередь?И если вы используете modernizr, видео-тег внезапно поддерживается, а теги объектов внутри будут реагировать по-разному, не должны ли они иметь теги noscript в качестве обходного пути для браузеров без сценариев ... моя голова вращается ^^ –