javascript - html5 视频无法在 Apple 机器上的 firefox 中播放

Question

我已将 HTML5 视频添加到我正在使用的网站并且一切正常，除了它不能仅在 Apple 机器上的 firefox 上播放，它在所有其他浏览器上运行良好，即使在 Windows 和 linux 上使用 firefox .

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

不知道是什么原因造成的，我认为这可能是浏览器的特定问题，它不允许在没有控件的情况下播放视频，但这是我们真正想要的效果。

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

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

设置嗯Supported Formats文章和/或 the bug旨在实现它。