使用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播放MP4的插件)仅在文件使用特定配置文件进行编码时才有效.这在Apple的常见问题解答中的问题#2中指定.

虽然协议规范不限制视频和音频格式,但当前的Apple实现支持以下格式:

视频: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 Audio Layer 3)8 kHz至48 kHz,立体声音频AC-3(Apple TV,仅限直通模式)

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

如果您也定位iOS设备,此表也可能有用,以便了解您的兼容性:

基线3.0:所有设备

基线3.1: iPhone 3G及更高版本,iPod touch第二代及更高版本.

主要配置文件3.1: iPad(所有版本),Apple TV 2及更高版本以及iPhone 4及更高版本.

主要配置文件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加载)以检查文件是否有效也很有用.