Видео для всех, где модернизр не работает? - PullRequest
Новая
       15

Видео для всех, где модернизр не работает?

3 голосов
/ 24 ноября 2011

У меня есть веб-страница, закодированная в html5 с использованием таких тегов, как header, footer, section и video.Я использую Modernizr для поддержки этих тегов в IE 7 и IE 8.

На странице есть видео, включая флэш-резерв (видео для всех).

Когда я тестирую страницу в IE 8,страница хорошо отрисована, включая теги, специфичные для html5.

Проблема в том, что резервная копия флэш-памяти для видео не работает.У меня есть черная область вместо флэш-плеера.

Это работает, только если я уберу тег script для загрузки modernizr.Если я создаю собственную версию modernizr без html5 shim, загружается флеш-плеер, и я могу воспроизводить видео, но теги html5 не распознаются.

Как я могу использовать видео для всех, у кого есть Modernizr / html5 shim?Почему это не работает?

Спасибо за вашу помощь

Обновление:

Для более подробной информации, моя страница основана на 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.

Ответы [ 3 ]

0 голосов
/ 30 марта 2013

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

0 голосов
/ 23 сентября 2013

В моем случае я тоже подозревал модернизма, но был FitVids. FitVids возился с "встраивать" объекты после того, как MediaElement.js уже сделал свое волшебство.

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

0 голосов
/ 24 ноября 2011

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

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

...