html5播放器中支持所有主要移动设备的视频编解码器设置?
Youtube 移动版使用 RTSP 流媒体,但这对于设置和维护来说是相当过分的。
因此,HTML5 可能是向移动设备提供嵌入在网站中的视频的最佳方式。 (我可以对此进行确认吗?还是有人不同意?)
还包括媒体文件的静态链接,以便手机可以决定如何处理它,并在边缘情况下下载并使用系统播放器启动它,这似乎支持更多编解码器和其他东西。
问题在于正确的视频编码。
我尝试了很多,最后得到了一个可以在 Iphone 4、软件升级后的 Iphone 3 和 Android 2.1 上播放的视频文件。这就是我可用于测试的全部内容。
要使其正常工作,似乎需要以下操作:
Format profile : [email protected]
Codec ID : avc1
该文件还需要使用 qt-faststart 进行处理(我不明白,因为它在 H264 中默认添加了更多要求规范视频信息在文件末尾进行编码。)
我搜索了很多,但没有运气,所以我的问题是:
选择什么设置来支持最可能的设备,同时具有良好的压缩、质量和内容。
我会擅长 H264 (AVC) 还是有必要支持 webm/ogg 或类似的替代源?
或者换句话说:
如果您将 HTML5 格式的视频放到网上,以便向移动设备提供服务。您会选择什么编解码器设置以及原因。
我将提出其他问题,我将部分回答自己,并将其链接到此处以了解如何操作:
- 兼容的 html5 播放器
- 进行 Flash 回退或相反,
- 如何正确地在服务器端对视频进行编码,包括要求安装和各种输入文件
希望在我将把我的视频网站全部设置好并准备好用于移动设备,并为每个人提供全面的指南。
Youtube mobile uses RTSP streaming, but thats rather overkill to set up and to maintain.
So it looks like HTML5 is probably the best way to serve videos embedded in websites to mobile devices. (Can I get confirmatino on that or does any one disagree?)
Also to include a static link to the media file so the phone can decide what to do with it and in edge cases download and start it with the system player, which seems to support more codecs and stuff.
The problem is the right video encoding.
I tried a lot and ended up with a video file that plays on Iphone 4, Iphone 3 with software upgraded and Android 2.1. Thats all I had available for testing.
To get it working at all the following seemed to be needed:
Format profile : [email protected]
Codec ID : avc1
The file also needed to be processed with qt-faststart
(which i don't understand because it adds more to the requirements as by default in H264 specification the video information is encoded at the end of the file.)
I searched a lot but with no luck, so my question is:
What settings to choose to support the most possible devices with still good compression, quality and stuff.
Will I be good with H264 (AVC) or will it be necessary to support an alternate source with webm/ogg or something like that anyway?
Or in other words:
If you put a video online in HTML5 to be served to mobile devices. What codec settings would you choose and why.
I will open other questions which I will partly answer myself and link them here on how to do:
- a compatible html5 player
- do flash fallback or the other way round
- how to server side encode the videos correctly includign requirement installations and various input files
Hopefully in the end I will have my video website all set up and ready for mobile and a comprehensive guide for everyone to do it as well.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
推荐的方法是将视频编码 3 次:
h264、vorbis 和 webm ...然后按此顺序将它们作为源放入 html5 标记中(因为某些设备只查看第一个),如果全部失败则回退闪光。
我不喜欢这个解决方案,因为我有 3 个视频文件需要编码和存储。
所以我采取了相反的方法,如果可能的话使用 Flash,并切换到 html5 作为后备。我更喜欢这个解决方案,而且闪存播放似乎更可靠。
嗯,它消耗更多的计算能力,所以对于高清视频,你可以争论,但是很好。
所以我最终得到了下表,应该如何使用这些东西:
IE:Flash(v9 也将支持 html5/h264,但 flash 很酷)
Firefox:Flash(目前仅支持 theora/vorbis)
Safari:如果可能的话使用 Flash,否则 3.0+ 版本支持 HTML5 / h264
Chrome:Flash,如果 Flash 不可用(不太可能)5.0+ 版本中支持 h264/html
Opera:Flash(尚不支持 h264。Opera 移动设备...无法工作。仅支持开放格式的 Html5。)
iPhone:HTML5/h264 (3.0+)
Android: HTML5 / h264 (2.0+)
唯一需要注意的是Android不使用flash,因为手机不会有流畅播放的性能,但在2.2版本中支持它......仍在努力中。
那么我们现在需要什么?
可靠的 Flash 检测和 JS。
如果没有可用的 JS,我们可以显示。 html5标签或flash播放器..我认为flash播放器更好。
Theora / Webm 唯一重要的情况是 Firefox 和 Opera。但他们应该支持 flash,它支持 h264 scence 版本 9.something。
The recommended way to go is to encode your video 3 times:
h264, vorbis and webm ... then put them as sources into the html5 tag in this order (because some devices only look at the 1ŝt one) and if all fails fall back to flash.
I don't like that solution because i have 3 video files to encode and to store.
So i approached it the other way round to use flash if possible and switch to html5 as a Fallback. I prefer that solution as well as flash playback seems to be more reliable.
Well it consumes more computing power so for HD videos you could debate but well.
So i ended up with the following table how stuff should be used:
IE: Flash (v9 will ship with html5/h264 support as well but flash is cool)
Firefox: Flash (only theora/vorbis supported for now)
Safari: Flash if possible, else HTML5 / h264 supported in versions 3.0+
Chrome: Flash, if flash not aviailable (unlikely) h264/html support in versions 5.0+
Opera: Flash (no support for h264 yet. Opera mobile... will not work. Html5 only with open formats.)
Iphone: HTML5 / h264 (3.0+)
Android: HTML5 / h264 (2.0+)
The only thing to watch out is that Android doesn't use flash because the mobile phone will not have the performance for smooth playback, but it supports it in versions 2.2 ... Still working on that.
So what do we need now?
Reliable Flash detection and JS.
If no JS is available we can display. the html5 tag or the flash player .. i think flash player is better.
The only cases where Theora / Webm would be important are Firefox and Opera. But they should support flash which supports h264 scince version 9.something.
iPad 读取源代码时存在一个错误,该错误已被详细记录。 mp4必须是第一位的。
There is a bug with iPad reading the source which is highly documented. The mp4 has to be first.