制作视频

Question

我想使用视频标记向用户显示HTML5视频。对于Firefox，Chrome和Opera WEBM按预期工作。在Windows和Mac上的Safari中，我的MP4版本也可以使用。我遇到的唯一问题是，它不会在iPad和iPhone上播放（当然是Safari）。

制作视频

MP4（h.264 + acc-lc）的转换方式如下（配置文件：基线和3.0级，以便与iOS实现最大兼容性）：

Stream＃0：0（eng）：视频： h264 （约束基线）（avc1 / 0x31637661），yuv420p，640x352,198 kb / s，17 fps，17 tbr，17408 tbn， 34 tbc（默认）
Stream＃0：1（eng）：音频： aac（LC）（mp4a / 0x6134706D），48000 Hz，立体声，fltp，56 kb / s（默认）

编辑：整个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

我发现，this和this等iOS设备的各种要求，以及转换后添加yuv420p像素格式时提到的someone。

实际上 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

显示视频

使用Modernizr，我会检测哪种格式是＆＃34;支持＆＃34;并将其添加到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"/>

我尝试了各种各样的方法：使用自己的界面，控件以及来自浏览器供应商和video.js的东西实现自己的实现，只是为了检查我是否也为此而烦恼。除了iPhone和iPad之外，所有工作都在上面列出的环境中工作。

我在Video on the web上阅读了这篇文章，尤其是this part，并且只为＆＃34;权利＆＃34;文件与＆＃34;右＆＃34;没有设置poster属性的类型。

我的Apache有

AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm

启用字节范围。这是从服务器获取部分内容所必需的。

有没有人知道那里发生了什么？提前谢谢！

修改：Safari和Chrome都会在iPad上抛出MEDIA_ERR_SRC_NOT_SUPPORTED错误。编码必定存在问题。

Answer 1

尝试切换＆＃39; controls＆＃39;属性 - 或以不同方式定义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)

此外，对iPad / iPhone的HTML5 <video>标记的稳定帮助是JW player. （与之合作）

 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'
 });

Answer 2

我找到了iPad和iPhone无法播放的原因。 我的文件夹通过htaccess限制访问以保护测试版应用程序。 Firefox等将用户名和密码转发给所有请求，Mac上的safari再次请求凭据，但iPad和iPhone上的浏览器则不会。要快速检查此我删除了文件夹保护，它运行正常。感谢您对我的问题的所有贡献和想法！

如何在iOS（iPhone和iPad）上播放带有HTML5视频标签的mp4视频文件？

制作视频

显示视频

2 个答案: