HTML5新特征、窍门和技术(16~20)
接上一篇,我们继续学习...
十六、Video支持
与<audio>元素很类似,在新的浏览器中也存在Video!事实上,就在最近,YouTube宣告了新的HTML5视频嵌入,当然,是为支持此功能浏览器。
因为HTML5的规范没有指定特定的视频编解码器,它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频(其中Flash播放器可以播放),Firefox和Opera是坚持开源Theora 和Vorbis格式。因此,当显示HTML5的视频,您必须提供这两种格式。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E,mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码
还有一个值得注意的一些事情:
我们技术上不需要来设置type属性,但是,如果我们不这样做,浏览器不得不自己去寻找类型。节省一些带宽,还是你自己声明下吧。
十七、视频预载(Preload Videos)
预载属性不完全是你想的那个样子,虽然,你应该先决定是否要在浏览器预装的视频。是否有必要?或许吧。如果访问者访问一个专门展示了一个视频的页面,你一定要预载的视频,节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案,它少了一点多余的东西。<video preload>
十八、显示控制条
如果你使用过上面的每一个提到的技术点,你可能已经注意到,使用上面的代码,视频仅仅显示的是张图片,没有控制条。为了渲染出播放控制条,我们必须在video元素内指定controls属性。<video preload controls>请注意,不同浏览器渲染出来的进度条的模样都是不一样的。
十九、正则表达式
你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性,我们可以在标签处直接插入一个正则表达式。
<form action="" method="get">
<label for="username">姓名:</label>
<input id="username" name="username" type="text" placeholder="4-10个英文字母"
pattern="[A-Za-z]{4,10}" required="required" autofocus />
<button type="submit">提交</button>
</form>
如果你熟悉正则表达式,那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性,则提交表单时,如果文本框中的内容不符合其正则表达式,文本框会高亮显示。
二十、属性支持检测
如果我们没有方法检测浏览器是否支持这些属性,这些就不能称之为好的属性。恩,不错的观点,事实上我们是有几种方法的,这里我们讨论2个。第一个是利用优秀的Modernizr库,或者,我们可以创建和分析这些元素,以确定浏览器的能力。例如,在我们前面的例子,如果我们要确定浏览器是否能使用pattern的属性,我们可以添加一小段JavaScript到我们的页面上:
alert( 'pattern' in document.createElement('input') );
事实上,这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面,我们创建了一个新的input元素,并确定了里面的pattern属性浏览器是否认得。如果是,浏览器则支持此功能。否则,当然就不支持了。
<script>
if (!'pattern' in document.createElement('input') ) { }
</script>
谨记此方法依赖于JavaScript。
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
HTML5新特征、窍门和技术(16~20)相关推荐
- HTML5新特征、窍门和技术(11~15)
接上一篇,我们继续学习... 十一.IE和HTML5(Internet Explorer and HTML5) 不幸的是,讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素. 所有元素,默认的, ...
- HTML5新特征、窍门和技术(6~10)
接上一篇,我们继续学习... 六.内容可编辑 最新的浏览器有个很赞的新属性可以应用到元素上,叫做contenteditable.顾名思义,就是允许用户编辑元素内容包含的任意文本,包括子元素.类似的用途 ...
- HTML5新特征、窍门和技术(1~5)
一.新的Doctype "doctype"中文意思指"文档类型" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- HTML5新的解析顺序,HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. HTML5表单新功能解析 ...
- 你必须知道的28个HTML5特征、窍门和技术
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 原文地址:h ...
- Primavera P6 20.12 新特征
whats new in p6 eppm 20.12 话说19.12.11还未分析完,Oracle P6 20.12就上映了,有兴趣的同学可以了解一方,需要知道的是截止目前编稿时间P6已更新了一个小补 ...
- HTML5铸就VMware新特性,WSX技术能让浏览器远程运行虚拟桌面
HTML5铸就VMware新特性,WSX技术能让浏览器远程运行虚拟桌面 曾子嶒 发表于 2012/03/21-07:42 HTML5 /VMware /WSX 快成为第一个分享的人吧! 分享到 V ...
- OpenJDK-11的新特征
OpenJDK-11的新特征 JDK 11是Java SE 11平台版本11的开源参考实现,由JSR 384在Java Community Process中指定. JDK 11 于2018年9月25日 ...
- WIFI 6有哪些新特征
WIFI 6有哪些新特征 WIFI 6 新特征 1024正交幅度调制(1024-QAM) 正交频分复用和正交频分多址 正交频分复用 正交频分多址 Wi-Fi 6正交频分多址 空分流 单独的目标唤醒时间 ...
最新文章
- javascript函数调用的几种方式
- why I could not see login popup in SAP Fiori Application
- nyoj914Yougth的最大化(二分搜索 + 贪心)
- Linux--安装截图工具Shutter
- 【Programming Clip】点分十进制IP和长整型转换
- java地址有什么构成_IP地址采用分层结构,由( )组成。
- Python3.7.2版本出现ModuleNotFoundError: No module named 'paramiko'解决办法
- linux svn备份,SVN完全备份svnadmin hotcopy
- 雷达如何推动社会发展
- 服装尺寸 html,超完整的各种服装尺寸对照表,总有你需要的
- 吃鸡降落伞降落,射线检测,触发销毁降落伞等
- cocos creator快速上手《摘星星》官方教程续|星月爸爸
- 「我的microNome组学分析流程」第1版
- 泰安链底层系统设计、核心优势、技术实现
- 阿里云自助建站+模板建站+功能定制建站如何选择,详细教程
- 汽车使用总结(三)--汽车里播放无损音乐的5种方法,极少人知道的秘密,音质瞬间提高
- 面试复习题--jvm的细枝末节
- java-net-php-python-jsp家具进销存管理系统1计算机毕业设计程序
- 应用回归分析第五版电子书_《应用回归分析-(第5版)》【价格 目录 书评 正版】_中国图书网...
- 使用Eclipse+httpClient+Jsoup读取网页数据-初级
热门文章
- 百万数据php7取出循环_PHP7带来了哪些重要的变化
- 不属于python循环结构的是( )_Python语句print(type(['a','1',2,3]))的输出结果是哪一项?_学小易找答案...
- Hadoop下水环境模拟集群运算模式
- 基于边缘计算的森林火警监测系统
- 作者:贺田田(1985-),男,香港理工大学电子计算学系博士生
- 【程序设计】模块化的注意事项和不良实践
- 【软件测试】软件调试基本技巧与策略
- 【数据结构与算法】伸展树的Java实现
- 【Java】封装带有泛型的序列化文件工具类
- 【算法分析与设计】计数排序