Html 如何在 iOS（iPhone 和 iPad）上播放带有 HTML5 视频标签的 mp4 视频文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29695295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad)?
提问by Marc Saleiko
I want to display HTML5 video to my users using the video tag. For Firefox, Chrome and Opera WEBM works as expected. In Safari on Windows and Mac my MP4 version works, too. The only problem I'm experiencing is, that it won't play on iPad and iPhone (Safari of course).
我想使用 video 标签向我的用户显示 HTML5 视频。对于 Firefox，Chrome 和 Opera WEBM 可以正常工作。在 Windows 和 Mac 上的 Safari 中，我的 MP4 版本也可以使用。我遇到的唯一问题是，它无法在 iPad 和 iPhone（当然是 Safari）上播放。
Create video
创建视频
The MP4 (h.264 + acc-lc) is converted like this (with profile: baseline and level 3.0 for maximum compatibility with iOS):
MP4 (h.264 + acc-lc) 是这样转换的（配置文件：baseline 和 level 3.0 以最大程度地与 iOS 兼容）：
- Stream #0:0(eng): Video: h264(Constrained Baseline) (avc1 / 0x31637661), yuv420p, 640x352, 198 kb/s, 17 fps, 17 tbr, 17408 tbn, 34 tbc (default)
- Stream #0:1(eng): Audio: aac (LC)(mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 56 kb/s (default)
- 流 #0:0(eng): 视频: h264(Constrained Baseline) (avc1 / 0x31637661), yuv420p, 640x352, 198 kb/s, 17 fps, 17 tbr, 17408 tbn, 34 tbc
- 流 #0:1(eng)：音频：aac (LC)(mp4a / 0x6134706D)，48000 Hz，立体声，fltp，56 kb/s（默认）
Edit:Whole ffprobe output (slight changes in bitrate etc. to the above mentioned):
编辑：整个 ffprobe 输出（比特率等略有变化上述）：
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf56.30.100
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
Stream #0:0(eng): Video: h264 (Constrained Baseline)
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr,
12800 tbn, 50 tbc (default)
Metadata:
handler_name : VideoHandler
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz,
stereo, fltp, 85 kb/s (default)
Metadata:
handler_name : SoundHandler
I found various requirements for iOS devices like thisand this, also someonementioned to add the yuv420p pixel format when converting.
我发现了像这样和这样的iOS 设备的各种要求，还有人提到在转换时添加 yuv420p 像素格式。
In fact the ffmpeg cmdlooks like this:
实际上ffmpeg cmd看起来像这样：
ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4
Display video
显示视频
With Modernizr I detect which format is "supported" and add it to the srcor the videotag. Last thing is adding the right MIME type. For mp4 I add type="video/mp4". The full code for the videotag is:
使用 Modernizr，我可以检测“支持”哪种格式并将其添加到src或video标签中。最后一件事是添加正确的 MIME 类型。对于 mp4，我添加type="video/mp4". video标签的完整代码是：
<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>
I tried various ways: own implementation with own interface, controls and stuff from browser vendors and video.js just to check whether i'm too studip for this. All work in the environments listed above except for iPhone and iPad.
我尝试了各种方法：使用自己的界面、控件和来自浏览器供应商和 video.js 的东西自己实现，只是为了检查我是否对此过于学习。除了 iPhone 和 iPad 之外，所有工作都在上面列出的环境中工作。
I read this article on Video on the web, especially this partand only serve the "right" file with the "right" type without a posterattribute set.
我在网络上的视频上阅读了这篇文章，尤其是这部分，并且只提供“正确”类型的“正确”文件，而没有设置poster属性。
My Apache has
我的阿帕奇有
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
And byte-ranges are enabled. This is needed to get partial content from the server.
并且启用了字节范围。这是从服务器获取部分内容所必需的。
Has anyone a clue what's going on there? Thanks in advance!
有没有人知道那里发生了什么？提前致谢！
Edit:Safari and Chrome both throw MEDIA_ERR_SRC_NOT_SUPPORTEDError on iPad. There must be an issue with the encoding.
编辑：Safari 和 Chrome 都MEDIA_ERR_SRC_NOT_SUPPORTED在 iPad 上抛出错误。应该是编码有问题。
采纳答案by Marc Saleiko
I found the reason why iPad and iPhone won't play it. My folder has restricted access via htaccessto protect the beta application. Firefox and so on forward the username and password to all requests, safari on Mac asks again for the credentials, but browsers on iPad and iPhone won't. To quickly check this I removed the folder protection and it worked fine. Thank you for all contributions and thoughts about my issue!
我找到了 iPad 和 iPhone 无法播放的原因。我的文件夹已通过 htaccess 限制访问以保护测试版应用程序。Firefox 等将用户名和密码转发给所有请求，Mac 上的 safari 再次要求提供凭据，但 iPad 和 iPhone 上的浏览器不会。为了快速检查这一点，我删除了文件夹保护，它工作正常。感谢您对我的问题的所有贡献和想法！
回答by doc holiday
Try toggling 'controls' attribute - or define srcdifferently.
尝试切换 ' controls' 属性 - 或以src不同方式定义。
<video src="http://example.com/path/mymovie.mov"
controls
height=340 width=640
poster="http://example.com/path/poster.jpg">
</video>
Check out this article 'About HTML5 Audio and Video for Safari' (developers guide)
查看这篇文章“关于 Safari 的 HTML5 音频和视频”（开发人员指南）
Also, a nice stable assistance to the HTML5 <video>tag for iPad / iPhone is JW player.(works with it)
此外，<video>对 iPad / iPhone的 HTML5标签的一个很好的稳定帮助是JW 播放器。（与它一起工作）
jwplayer('video').setup({
flashplayer: '/Scripts/jwplayer/player.swf',
file: 'seanpenn.mp4',
autostart: false,
controlbar: 'over',
image: 'spicoli.jpg',
width: 295,
height: 214,
skin: '/Scripts/jwplayer/glow.xml',
stretching: 'exactfit'
});
