FancyBox + MediaElement проигрыватель + IE - PullRequest
Новая
       4

FancyBox + MediaElement проигрыватель + IE

4 голосов
/ 17 февраля 2011

Попытка включить проигрыватель mediaelement.js в лайтбокс (fancybox.net).

Плеер работает в IE без FancyBox.FancyBox работает в IE с обычным текстовым контентом.Но плеер + fancybox вместе не работает в IE (отлично работает во всех других браузерах).

Только игрок на тестовой странице: http://ways -means.channeltree.com / index3.html

Игрок в лайтбоксе на тестовой странице: http://ways -means.channeltree.com / index4.html

Также попытался извлечь контент через iframe (тот же тестовый домен, что и выше, но с index5.html)

Весь день ломал голову, и, возможно, что-то маленькое / глупое, что я скучаю, но не уверен, что.

Любая помощь приветствуется - спасибо!

Ответы [ 3 ]

2 голосов
/ 03 октября 2012

Недавно я столкнулся с той же проблемой, что и вы в проекте. В моем случае, fancybox правильно загрузил проигрыватель медиаэлементов в модальное окно. Тем не менее, в IE8 был представлен флеш-плеер, и вы могли видеть, как элементы управления убраны и никогда не заменяются.

Посмотрев немного на плагин, кажется, что mediaelement прослушивает событие, запущенное флэш-плеером, чтобы инициализировать элементы управления плеером. В зависимости от ряда обстоятельств, я обнаружил, что игрок испускал это событие ПЕРЕД тем, как плагин был вызван, что означало, что плагин никогда не определял, что игрок готов.

Исправление для меня состояло в том, чтобы явно установить для параметра flashName путь к swf. Затем я просто удалил разметку объекта из моего источника, позволив плагину создать ее.

Явно указывает путь к SWF: 

    <script>
    $(document).ready(function(){
      $('video').mediaelementplayer( {
      flashName: '/path_to_mediaelement_swf/flashmediaelement.swf',
      });
   });
  </script>

Источник видео: 

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis for older Firefox and Opera versions -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Optional: Add subtitles for each language -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Optional: Add chapters -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
    <!-- Allow the plugin to generate the object markup, preventing the swf source from loading too early  -->

</video>

Надеюсь, это поможет!

2 голосов
/ 14 марта 2012

Я попал сюда в поисках решения. Я ничего не нашел, пока сам не нашел решение. Вот это, просто для информации. Надеюсь, это кому-нибудь поможет. 

$('.open-fancybox').fancybox({
    'afterShow': function() {
        $('#mediaelement').mediaelementplayer();
    }
});

<a class="open-fancybox" href="#fancybox">
<div id="#fancybox">
    <video id="#mediaelement" src="...mp4">
</div>
0 голосов
/ 10 января 2013

У меня только что возникла та же проблема, оказывается, чем в IE 7/8, если у вас есть na (флэш-плеер) в отображаемом div: ни один флэш-плеер не будет загружать видео правильно.

Исправление для меня состояло в том, чтобы убрать отображение без div и использовать jquery, чтобы скрыть все div с классом .hidden_video.

После этого видео правильно загружено в fancybox.

...