Javascript html5视频不能在苹果电脑上的firefox中播放

我在一个网站上添加了一个HTML5视频&一切都很好。它不仅在苹果电脑上的firefox上播放，而且在所有其他浏览器上都很好地运行，即使在Windows和linux上的firefox上也是如此

我所做的一件事是从视频中删除控件，并添加了一个播放按钮的图像，供用户单击以播放视频&一个关闭按钮的图像以关闭/停止视频

如果你知道是什么导致了这种情况，我想这可能是一个特定于浏览器的问题，不允许在没有控件的情况下播放视频，但这是我们真正想要的效果

HTML5

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

---

OSX上的Firefox桌面尚不支持H264/MP4

---

设置eh文章和/或旨在实现它。

关于.webm，我也添加了这种格式。

如果OSX上的firefox不能使用mp4，它是否应该使用webm？你是对的。我错过了（没有滚动）。WEBM可能无法显示的原因有很多，例如错误的mime类型、错误的编码等。IIRC WebConsole将给出有关媒体类型以及某些源无法加载的原因的警告。您所说的“IIRC WebConsole”是什么意思，您是指签入firbug吗？“如果我没记错的话”。我指的是内置Firefox开发工具（tools/WebDeveloper/WebConsole）的Web控制台。不知道Firebug是否也显示警告。

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'});
});