CODEWITHSUNDEEP
mediaelement.js
ClosDesign
ClosDesign

Reputation: 3924

mediaelement.js Flash Firefox

  1. For some reason I can not get the mediaelement.js Flash player to work in Firefox. I am using .m4v and .mp4 files to test this.

    I know Firefox can not play .m4v or .mp4 in it's native HTML5 player but we don't want to encode a bunch of videos just for .ogv and .webm.

    Until .webm takes over the market.

    Default Flash players 9 and up are supposed to play .mp4 and .m4v versions natively.

  2. Also, if we use the multiple sources option and the object tag has the <param name="flashvars" value="controls=true&poster=../media/echo-hereweare.jpg&file=../media/echo-hereweare.mp4" />

    Is the poster and the file paths able to use http:// URLs rather than relative URL's?

  3. In testing Firefox I have used both this option:

    <video width="640" height="360" src="../media/echo-hereweare.mp4" 
type="video/mp4" id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="none"></video>

    And this option below:

    <video width="640" height="360" id="player2" 
poster="../build/echo-hereweare.jpg" controls="controls" preload="none">
    <!-- MP4 source must come first for iOS -->
    <source type="video/mp4" src="../build/echo-hereweare.mp4" />

    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">        
        <param name="movie" value="../build/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&poster=../media/echo-hereweare.jpg&file=../build/echo-hereweare.mp4" />        
         <!-- Image fall back for non-HTML5 browser with JavaScript turned off 
              and no Flash player installed -->
         <img src="../build/echo-hereweare.jpg" width="640" height="360" alt="Here we are" 
    title="No video playback capabilities" />
    </object>   
</video>

    Neither of the them are working. The Flash Skin DOES show up but the functionality is not working. I can see the timeline, the Big Play button, volume, but nothing is selectable.

  4. The odd thing is that I had to instantiate the player with jQuery to get the skin to work on Chrome and IE. In the examples it says nothing about having to instantiating it. Just point to the files. That's besides my issue.

  5. The Flash player works locally when I do similar to what I described above but not our on our site. Am I missing something?

UPDATE:

The actual issue was a z-index conflict with our current CSS on the live site. Mainly our object tags and the controls.

This is our solution overtaking the player's CSS.

video{z-index:99999}
.mejs-overlay-button{z-index:700}
.mejs-overlay-play{}
.mejs-container .mejs-controls{z-index:700}
.mejs-container-fullscreen video{z-index:99999}
.mejs-container .mejs-container-fullscreen{z-index:9999}
.mejs-fullscreen-button{right:0;}

Don't know if this will help anyone else but just be careful of it.

Upvotes: 2

Views: 10340

Answers (3)

Nagkumar Arkalgud
Nagkumar Arkalgud

Reputation: 327

I had the same issue. I didn't have the .swf file included on my server. Copy the mediaelement.swf file from the build folder and href it properly. Example:

<video width="100%" height="auto" poster="some_image.jpg" controls="controls" autoplay="true">
    <source type="video/mp4" src="myvideo.mp4" /><source type="video/webm" src="myvideo.webm" />
    <source type="video/ogg" src="myvideo.ogv" />
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf"><!--Proper href here-->
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=myvideo.mp4" />
        <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
    </object>
</video>

Upvotes: 0

pospi
pospi

Reputation: 3580

I had a similar issue with the mediaelement player where the correct video types were not being prioritized. Seems like on occasion browsers will indicate that they support formats which they in fact do not.

In my case I was using FLV and M4V files and iDevices were trying to play FLV, but I'll include this solution here in case others stumble across this thread when having troubles.

To fix this I basically did some browser detection with UA strings, something like this, and then reordered the <source> elements accordingly:

function prioritizeFormat(mediaelement)
{
    if (FORCE_M4V_VIDEOS) { // flag for mobile devices that think they can support FLV
        $(mediaelement).find('source[type="video/m4v"]').after($(mediaelement).find('source[type="video/x-flv"]'));
    }
}

Upvotes: 0

ted
ted

Reputation: 11

If it works locally, but not through the webserver, it's probably the mime-types.

Check this: MediaElements – Installation.

Hope it helps.

Upvotes: 1

Related Questions