当前位置:  开发笔记 > 编程语言 > 正文

我们需要了解多少才能走近HTML5

HTML5的video标签真的很威武,几乎所有的主流浏览器可以直接提供本地的视频播放功能,相对于以前通过Flash这种类似中继的播放方式,要先进很多。同时也为一些不支持Flash播放的移动设备带来的希望。也许,你会因为video标签可以支持到的视频种类而">
\

  HTML5 的


  也许,你会因为

  下面就来看看到底 HTML5

关于 Web 格式
  目前来说,广泛被浏览器支持的的视频编码格式总共有三种,但是没有一种可以达到通吃所有浏览器的境界。所以对于同一个视频,至少需要两种格式,才能在所有浏览器里播放。

  首先要选择一个被支持最多的视频格式,那么就是 MP4 + H.264 这个组合了,音频方面则是 AAC 或者 MP3。MP4 封装的视频,可以在 Safari、Chrome 和 IE9 里播放(悲剧的是 IE9 只支持 Windows Vsita 和 Windows 7)。同时,这个组合也是你通过 Flash 来作为播放器播放的最好选择了,同时这个组合也可以在很多手持设备上播放,比如 iOS、Android、Blackberry、PSP、PS3 等等。在 H.264 编码的时候,可以选择 “High Profile” 以获得最好的编码质量,或者 “Baseline” 来应对一些移动设备。

  除此之外,还有两个组合,WebM + VP8 和 Ogg + Theora + Vorbis 来满足其他的浏览器。WebM 可以在 Firefox(4.0+)、Chrome(6.0+)和 Opera(10.60+)中播放;Ogg 可以在 Firefox(3.5+)、Chrome(3.0+)和 Opera(10.54+)中播放。

  那么问题又来了,如果要从中选择一个,是 Ogg 呢,还是 WebM 呢?

  从我们(Zencoder)来看,WebM 肯定是未来开放式视频格式的领跑者,VP8 比起 Theora 来说,要更加的优秀,而且还有强大的社区作为其后盾,特别是 Google 的支持。

  反过来看 Ogg,其最大的特点是她支持了 44.64% 的浏览器(译者注:这里应该是指浏览器分部率中,可以播放的比例),而 WebM 仅支持 9.35% 的浏览器。如果仅着眼于 2010 年 10 月,那么 Ogg 也是一个不错的选择。如果你是为了未来的 1-2 年,那么WebM 似乎更有优势一些。

  推荐:MP4 + WebM 或者 Ogg 其中一种,当然全部都编码出来也可以 ^^。

关于移动设备
  和浏览器的情况一样,在移动设备上也没有一个可以通吃全盘的编码方案。不同的移动设备有着不同的编码标准,甚至比起浏览器领域来说,更加的复杂。不过还是有一些方案可以让你省不少精力的。

  在这里你可以查看一个完整的移动设备编码列表。

  1. 现在绝大多数的移动设备都支持 MP4/H.264。包括 iOS 系列的产品(iPhone、iPod、iPad、Apple TV 等),绝大多数的 Android 设备,新的黑莓手机。对于这类设备,编码的时候应该选择 “Baseline”。在分辨率上,对于 iOS 和 Android 设备,选择不高于 640×480 的分辨率即可,对于黑莓系列手机,选择不高于 480×360 的分辨率即可。

  注意:可以在 iPhone 上播放的这类编码格式,同样也可以在 HTML5(当然仅仅是一部分浏览器) 或者 Flash 中播放。如果你怕麻烦或者想节省一些转换花费的时间,可以考虑选择在编码的时候,不高于 iOS 系列设备和 Android 系列设备的分辨率。如果你不怕麻烦,并且视频在不同的码率上表现差异很大,或者需要在电脑上有更清晰的表现,就多编码出来几个不同的码率吧。

  2. 对于一些老的移动设备,选择 3GP/MPEG4。绝大多数的黑莓手机和一些 Android 的手机,都支持这种格式。同时,3GP 在 iPhone 和 iPod 上都可以播放。

  3. 关于 WebM,现在也许还不是一个好的选择,虽然在一些 Android 的手机上已经可以播放,但是支持还不是很广泛。预计未来 1-2 年会有更多的支持 WebM 格式的手机。

  推荐:怕麻烦则 MP4 格式,640×480 或者 480×360。不在乎编码时间和存储空间,就应该选择三种 MP4 编码方案(480×360,640×480,720p + “Main profile” )
外加一到两种 3GP 格式(320×240 或者 176×144),可以参考这份日志来获取更加详细的编码参数。

关于多种比特率
  有可能你在考虑,是不是要为带宽很足的用户准备高比特率的视频,并且为了照顾小带宽的用户,另外再准备一份低比特率的视频呢?如果你的用户已经 开始在互联网上观看高清的视频,那么为了迎合这类用户的习惯和用户体验,那么答案则为是。可以考虑提供 2-3 种不同比特率或者分辨率的视频来满足使用不同互联网连接方式的用户。比如提供一份 640×360 和 一份 1280×720 的选择。未来我们会更多的讨论这个问题。

关于流媒体播放
  本篇文章不讨论关于流媒体的问题,并且 RTMP(Flash)、Smooth Streaming(Silverlight)、HTTP Live Streaming(iOS)都要求特殊的视频格式。这已经超出了我们要讨论的范围了。未来将会有相关的文章进行讨论

结论
  1. 最低限度的支持 HTML5,应该选择 MP4 + WebM 或者 Ogg 其中的至少一种,并且使用 Flash 来播放 MP4 以便提供向下兼容支持。

  2. 移动设备方面,H.264/MP4 会让你省心很多,如果可以提供 2-3 种不同分辨率和码率的视频,会大大增加兼容性。

建议
  以下是关于所有类型的视频编码方案建议,Zencoder 支持以下列出的所有编码格式(广告了…)

1. 只为能播放

HTML5,Flash和移动设备:MP4/H.264,使用 “Baseline” 编码,480×360 或者 640×480
HTML5:WebM 或者 Ogg

2. 更上一层楼

HTML5,Flash:MP4/H.264,“High profile” 编码
HTML5:WebM
HTML5:Ogg
移动设备:MP4/H.264,“Baseline profile” 编码,分辨率 480×360 或者 640×480

3. 我要支持所有设备和浏览器

HTML5,Flash:MP4/H.264,“High profile” 编码
HTML5: WebM
HTML5:Ogg
移动设备:MP4/H.264,“Baseline profile” 编码,分辨率选择 480×360 以便提供高兼容性
移动设备:MP4/H.264,“Main profile” 编码,分辨率 1280×720 以便支持新的设备(如 iPhone4、iPad 和 Apple TV)
移动设备:3GP/MPEG4,分辨率320×240 和(或) 177×144 以便支持非智能手机
 


推荐阅读
  • 定义Function类型:1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • 本文详细解析了如何利用Appium与Python在真实设备上执行测试示例的方法。首先,需要开启手机的USB调试功能;其次,通过数据线将手机连接至计算机并授权USB调试权限。最后,在命令行工具中验证设备连接状态,确保一切准备就绪,以便顺利进行测试。 ... [详细]
  • 本文深入探讨了 iOS 开发中 `int`、`NSInteger`、`NSUInteger` 和 `NSNumber` 的应用与区别。首先,我们将详细介绍 `NSNumber` 类型,该类用于封装基本数据类型,如整数、浮点数等,使其能够在 Objective-C 的集合类中使用。通过分析这些类型的特性和应用场景,帮助开发者更好地理解和选择合适的数据类型,提高代码的健壮性和可维护性。苹果官方文档提供了更多详细信息,可供进一步参考。 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 在使用关系型数据库时,通常需要通过用户名和密码进行身份验证才能访问数据。然而,MongoDB默认情况下并不强制要求这种身份验证机制,使得用户无需凭据即可访问并执行各种操作。虽然这一设计简化了初学者的上手过程,但也带来了显著的安全风险。为了提升MongoDB的连接安全性,本文将探讨多种策略与实践,包括启用身份验证、配置网络访问控制、加密通信以及定期审计安全设置,以确保数据库的安全性和数据的完整性。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • POJ 1696: 空间蚂蚁算法优化与分析
    针对 POJ 1696 的空间蚂蚁算法进行了深入的优化与分析。本研究通过改进算法的时间复杂度和空间复杂度,显著提升了算法的效率。实验结果表明,优化后的算法在处理大规模数据时表现优异,能够有效减少计算时间和内存消耗。此外,我们还对算法的收敛性和稳定性进行了详细探讨,为实际应用提供了可靠的理论支持。 ... [详细]
  • 本文详细介绍了 MiniGUI 中静态控件(CTRL_STATIC)的使用方法及其不同风格的应用。具体而言,采用 SS_SIMPLE 风格的静态控件仅支持单行文本显示,不具备自动换行功能,且文本始终为左对齐。而 SS_LEFT、SS_CENTER 和 SS_RIGHT 风格则分别实现了文本的左对齐、居中和右对齐布局,提供了更多的排版灵活性。此外,文章还探讨了这些控件在实际开发中的应用场景和最佳实践。 ... [详细]
  • 1. 给定一个包含 n 个整数的数组 a 和一个整数 x,需要判断数组中是否存在两个不同的元素,它们的和恰好等于 x。2. 反转数对问题:对于一个包含 n 个不同元素的数组 A[1...n],如果存在 i < j 且 A[i] > A[j],则称 (i, j) 为一个反转数对。本文将详细探讨这两种与归并排序相关的算法题目,并提供高效的解决方案。 ... [详细]
  • Go语言中的高效排序与搜索算法解析
    在探讨Go语言中高效的排序与搜索算法时,本文深入分析了Go语言提供的内置排序功能及其优化策略。通过实例代码,详细讲解了如何利用Go语言的标准库实现快速、高效的排序和搜索操作,为开发者提供了实用的编程指导。 ... [详细]
  • 教育类应用程序:提升学习效率的专业工具
    2019年,多家独角兽企业高薪聘请Python工程师,这引发了对高效学习工具的关注。以Duolingo为例,其“边玩边学”的模式为语言学习提供了新思路。类似地,错题本作为一种有效的学习方法,能够帮助学生记录和复习易错题目,从而提高学习效率。教育类应用程序通过整合这些先进的学习策略和技术手段,正逐渐成为提升学生学习效果的重要工具。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
author-avatar
瓶子2502854683
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有