使用html5视频标签时在safari中不播放视频

Question

我正在用django建立一个网站。我正在尝试使用html5标签在我的网页中包含一个视频。我的代码如下。

<video controls style="width: 100%; height: 100%;" id="video" preload="none">
                    <source src="{% static 'media/video1.ogv' %}" type='video/ogg; codecs="theora, vorbis"'/>
                    <source src="{% static 'media/video1.webm' %}" type='video/webm'>
                    <source src="{% static 'media/video1.mp4' %}" type='video/mp4'>
                    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                </video>

但safari浏览器中没有播放视频。我已将视频更改为video1.mov文件，但仍无法播放。我正在使用heroku进行部署。我检查了是否安装了Quickstart。它已经安装好了。 显示的错误是

Failed to load resource: Plug-in handled load
http://www.***.com/static/media/video1.mov

有人能帮我解决这个问题吗？

Answer 1

可能是MP4如何编码的问题。我知道这个问题有点老了，但我也有同样的问题，所以万一你或者像我一样最先发现这个问题的人能帮上忙：

看起来QuickTime（这是一个为Safari播放MP4s的插件）只在文件用特定的配置文件编码时才起作用。这在Apple's FAQ中的问题2中指定。

Although the protocol specification does not limit the video and audio formats, the current Apple implementation supports the following formats:

Video: H.264 Baseline Level 3.0, Baseline Level 3.1, Main Level 3.1, and High Profile Level 4.1.

Audio: HE-AAC or AAC-LC up to 48 kHz, stereo audio MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio AC-3 (for Apple TV, in pass-through mode only)

您需要使用其中一个视频配置文件进行编码，以使其与QuickTime一起工作，从而与Safari一起工作。

如果您同时瞄准iOS设备，this table可能也很有帮助，以便了解您与哪些设备兼容：

Baseline 3.0: All devices

Baseline 3.1: iPhone 3G and later, and iPod touch 2nd generation and later.

Main profile 3.1: iPad (all versions), Apple TV 2 and later, and iPhone 4 and later.

Main Profile 4.0: Apple TV 3 and later, iPad 2 and later, and iPhone 4S and later

High Profile 4.0: Apple TV 3 and later, iPad 2 and later, and iPhone 4S and later.

High Profile 4.1: iPad 2 and later and iPhone 4S and later.

最后，下面是创建这些编码的ffmpeg选项： https://trac.ffmpeg.org/wiki/Encode/H.264#AdditionalInformationTips

知道您可以在QuickTime中打开一个文件（不必通过Safari加载）以检查文件是否工作也是很有用的。