2011-11-24 2 views
3

У меня есть веб-страница, закодированная в 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.

+0

Если вы включили какой-то код или разместите его здесь http://jsfiddle.net/, это поможет людям помочь вам .... – ManseUK

+0

Кажется немного запутанным, зачем использовать MediaElementJs, если вы вручную указываете проигрыватель Flash Flashback и используя другого игрока? MEJS - это прокладка, которая включает в себя компонент Flash ... во всяком случае, не так ли, потому что SWF, который вы включаете, может быть не в одном домене? Кроме того, не проверяет ли в MSI и версии проверку скрипта в первую очередь?И если вы используете modernizr, видео-тег внезапно поддерживается, а теги объектов внутри будут реагировать по-разному, не должны ли они иметь теги noscript в качестве обходного пути для браузеров без сценариев ... моя голова вращается ^^ –

ответ

0

Вам нужно использовать «Видео для всех»?

Мы используем http://mediaelementjs.com в сочетании со страницами, размеченные с помощью HTML5 и использование Modernizr без проблем по всему OS/Браузерам

+0

Нет, я «Мне нужно специально« видео для всех », но чтобы мой вопрос был простым, я упомянул« видео для всех »вместо mediaelelmentjs, потому что он описывает тот же HTML-код. – benoit

+0

Не могли бы вы разместить часть своего кода? Я использую modernizer и mediaelementsjs, но он не работает с IE 8. – benoit

0

Если вы используете несколько JavaScript библиотеки используют jQuery.noConflict();

0

В моем случае, я тоже подозреваемый в модернизации, но был FitVids. FitVids возился с объектами «встраивания» после того, как MediaElement.js уже выполнили свою магию.

Чтобы исправить это, мне нужно было убедиться, что когда-либо было jQuery().fitVids()доjQuery('video,audio').mediaelementplayer().

Смежные вопросы