HTML5视频方案:支持iPad Safari、Firefox、Chrome、IE9876

本文介绍在HTML网页中实现视频播放的不同方案,包括针对各种浏览器的支持情况。提供了两种主要方案:一是使用mp4格式覆盖大多数浏览器,并通过Flash播放器支持不支持mp4的浏览器;二是使用webm格式,这是一种开源格式,但不支持Safari(iPad)。文章还提供了一个演示链接及具体实施步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML网页视频点播方案

想在网页中播放视频?

以前浏览器不能直接播放视频,所以需要用插件,比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器,flash有时候会导致浏览器卡、崩溃。

现在浏览器集成了播放器,不再需要插件了,直接能放视频,提高了性能、稳定性、跨平台兼容性。在HTML 4、XHTML 1、HTML5的页面中都能播放。

浏览器能播放哪种格式的视频?各个浏览器不同,有专利格式的,有开源格式的。

具体支持情况如下:

专利格式mp4:Safari(iPad、Windows、Mac OS)、Chrome、IE9

开源格式webm:Firefox、Chrome、Opera

开源格式ogg:Firefox、Chrome、Opera

如何让视频在所有浏览器上都能播放?如何支持iPad和IE876?请看下文。

商业方案:mp4->flash放mp4

视频文件格式:mp4

支持:Safari(iPad、Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

原理:检测浏览器是否支持播放mp4,不判断浏览器名称,只检测功能。

结果:在Safari(iPad、Windows、Mac OS)、Chrome、IE9中原生播放mp4,在Firefox、Opera、IE876中使用flash播放器播放mp4。

优点:1个mp4文件,支持所有主流浏览器

缺点:mp4是专利格式,需考虑编码器授权

前公司演示:http://www.happyelements.cn/

步骤:

1、在web server的mime配置中加入video/mp4

2、下载代码:http://files.cnblogs.com/sink_cup/html_video.7z

请注意flow player是GPL授权的(http://flowplayer.org/download/index.html),如果有闭源的需要,请购买flow player或者自己编译一个flex播放器,比较简单。

代码采用公共领域授权,可任意使用。

截图与拍照如下:

开源方案:webm->flash放webm

视频文件格式:webm

支持:Safari(Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

不支持:Safari(iPad)

原理:在Firefox、Chrome、Opera中原生播放webm,在Safari(Windows、Mac OS)、IE9876中使用flash播放器播放webm。

优点:webm是开源格式,1个webm即可支持主流浏览器。

缺点:不支持Safari(iPad),因为Safari(iPad)不支持flash。

依赖于adobe flash player支持webm,adobe在2010年5月宣称flash player将支持webm(http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html),截至2011年4月21日还没有结果。

todo

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值