html5 video not playing in firefox on Apple machinees

Question

I've added a HTML5 video to a site I'm working on & everything is working fine execept it doesn't play on firefox on Apple machines only, it works well on all other browsers even with firefox on Windows & linux.

One thing which I've done is remove the controls from the video and added an image of a play button for the user to click for to play the video & an image of a close button to close/stop the video.

Any idea what may be causing this, I think it may be a browser specific issue which doesn't allow videos to play without controls, but this is an effect we really want.

HTML 5

<div id="video-wrapper" style="z-index: 210; background-color: rgb(0, 0, 0);">
    <div align="center">
        <video id="hp-video-player" preload="auto" poster="/wp-content/uploads/Homepage_arival_preview.jpg" style="display: inline-block;">
        <source type="video/mp4" src="/wp-content/uploads/Homepage_Movie.mp4"><source type="video/webm" src="/wp-content/uploads/Homepage_Movie.webm"><object width="1900" height="1060" type="application/x-shockwave-flash" data="http://development.com/wp-content/themes/jupiter/js/flashmediaelement.swf"></object><param name="movie" value="http://development.com/wp-content/themes/jupiter/js/flashmediaelement.swf"><param name="flashvars" value="controls=true&amp;file=/wp-content/uploads/Homepage_Movie.mp4"><img src="/wp-content/uploads/Homepage_arival_preview.jpg" title="No video playback capabilities"></video>
        <img id="video-close-btn" src="http://development.com/wp-content/themes/jupiter-child/images/x-close-menu.png" style="display: inline;">
        <div align="center"><img id="hp-play-btn" src="http://development.com/wp-content/themes/jupiter-child/images/play_button.png" style="display: none;"></div>
    </div>
</div>

JS

var video = jQuery("#hp-video-player").get(0);

jQuery("#hp-play-btn").click(function() {  // Play button Click Actions
    video.play();
    jQuery("#hp-video-player, #video-close-btn").fadeIn(300);
    jQuery(this).fadeOut(500);
    jQuery("#video-wrapper").css({'background-color' : '#000000', 'z-index' : '210'});
}

jQuery("#video-close-btn").click(function(){ // Close button Click Actions
  video.pause();
  jQuery("#hp-video-player, #video-close-btn").fadeOut(500);
  jQuery("#hp-play-btn").fadeIn(300);
  jQuery("#video-wrapper").css({'background-color' : 'transparent', 'z-index' : '65'});
});

Answer 1

H264/MP4 is not supported on Firefox Desktop on OSX yet.

Sett eh Supported Formats article and/or the bug aiming to implement it.