使用 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进行部署。我检查了是否安装了快速入门。它已经安装好了。 显示的错误是

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

谁能帮我解决这个问题？

Answer 1

可能是 MP4 的编码方式存在问题。我知道这个问题有点老了，但我遇到了同样的问题，所以如果能帮助你或其他人像我一样首先找到这个问题：

似乎 QuickTime（这是为 Safari 播放 MP4 的插件）仅在使用特定配置文件编码文件时才有效。这是在Apple's FAQ 的问题#2 中指定的。

虽然协议规范没有限制视频和音频格式，但目前苹果实现支持以下格式：

视频： H.264 Baseline Level 3.0、Baseline Level 3.1、Main Level 3.1 和 High Profile Level 4.1。

音频： HE-AAC 或 AAC-LC 高达 48 kHz，立体声音频 MP3（MPEG-1 音频第 3 层）8 kHz 至 48 kHz，立体声音频 AC-3（适用于 Apple TV，仅在直通模式下）

您需要使用其中一种视频配置文件进行编码，以使其与 QuickTime 以及 Safari 一起使用。

如果您还针对 iOS 设备，this table 也可能会有所帮助，以便了解您与哪些设备兼容：

Baseline 3.0：所有设备

Baseline 3.1： iPhone 3G 及更新机型，以及 iPod touch 第 2 代及更新机型。

主要配置文件 3.1： iPad（所有版本）、Apple TV 2 及更高版本，以及 iPhone 4 及更高版本。

Main Profile 4.0： Apple TV 3 及更高版本、iPad 2 及更高版本、iPhone 4S 及更高版本

High Profile 4.0： Apple TV 3 及更高版本、iPad 2 及更高版本、iPhone 4S 及更高版本。

High Profile 4.1： iPad 2 及更高版本和 iPhone 4S 及更高版本。

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

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