Search code examples
jqueryhtmlexpressionenginemediaelement.js

mediaelement.js: Getting videos to work in Firefox


This seems like a common issue but I have not found any questions that have an answer marked so thought I would create one in hopes of finding a solution.

My videos work fine in Chrome and Safari but when it comes to Firefox it doesnt display at all.. my CMS is ExpressionEngine if that helps any. Does anyone have experience with this?

The inserted code for the video on the page:

<video width="640" height="360" preload="none" controls="controls" poster="http://site.com/img.jpeg" id="player1" type="video/mp4" src="http://site.com/content/videos/videotest(360p_H.264-AAC).mp4" tabindex="0"></video>

Solution

  • For testing purposes replace your video tag with these videos (from mediaelement's website)

    <video id="player1" width="540" height="303" controls="controls" preload="none">
        <source src="
    http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
        <source src="
    http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
        <source src="
    http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
    </video>
    

    If the above code works in FF, then the problem is related to video compression for FF. Like you I've had some problems with mediaelement.js but it turned out it was my videos that weren't well compresseed.