Player FancyBox + MediaElement + IE

Question

An attempt to include the player mediaelement.js in the lightbox (fancybox.net).

Player works in IE without FancyBox. FancyBox works in IE with regular text content. But player + fancybox together does not work in IE (works fine in all other browsers).

Just a player on the test page: http://ways-means.channeltree.com/index3.html

Lightbox player on the test page: http://ways-means.channeltree.com/index4.html

Also tried to pull the contents via iframe (same test domain as above, but with index5.html)

I puzzled all day, and maybe something small / stupid that I’m missing, but I don’t know what.

Any help is appreciated - thanks!

Answer 1

I came here looking for a solution. I did not find anything until I found a solution myself. Here it is, just for information. Hope this helps someone.

$('.open-fancybox').fancybox({ 'afterShow': function() { $('#mediaelement').mediaelementplayer(); } }); <a class="open-fancybox" href="#fancybox"> <div id="#fancybox"> <video id="#mediaelement" src="...mp4"> </div> 

Answer 2

I recently encountered the same problem as in the project. In my case, fancybox correctly loaded the media player into the modal window. However, a flash player was introduced on IE8, and you could see that the controls are being removed and never replaced.

After viewing the plugin a bit more, it seems that mediaelement is listening for the event triggered by the flash player to initialize the controls for the player. Depending on a number of circumstances, I found that the player emitted this event before the plug-in was called, which means that the plug-in never determined that the player was ready.

The fix for me was to explicitly set the flashName parameter to the swf path. Then I just deleted the markup of the objects from my source, which allowed the plugin to create it.

Explicit swf path setup:

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

Video Source:

 <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> 

Hope this helps!

Answer 3

I had the same problem, it turns out than in IE 7/8, if you have (flash player) in a div that displays: no flash player will load the video correctly.

The fix for me was to display no div on the display and use jquery to hide all divs with the .hidden_video class.

After that, the video loaded correctly in fancybox.