请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 查看内容

HTML5入门知识整理 第二章 HTML5新特性及标签的使

2013-11-5 12:05| 发布者: admin| 查看: 1048| 评论: 1|原作者: admin

摘要: 本章向大家讲解一下HTML 5中的新特性,以及每种标签的使用。 HTML5新特性 HTML 5 中的一些有趣的新特性:用于媒介回放的 video 和 audio 元素。对本地离线存储的更好的支持, 新的特殊内容元素,比如 article 、 ...
本章向大家讲解一下HTML 5  中的新特性,以及每种标签的使用。

HTML5新特性 HTML 5 中的一些有趣的新特性:用于媒介回放的 video 和 audio 元素。对本地离线存储的更好的支持, 新的特殊内容元素,比如 article 、footer 、header、nav 、section 新的表单控件,比如 calendar 、date、time、email 、url、search

HTML 5 视频 许多时髦的网站都提供视频。 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML 5 规定了一种通过 video  元素来包含视频的标准方法。

视频格式 当前,video 元素支持三种视频格式:

格式 IE Firefox Opera ChromeSafari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis  音频编码的 Ogg  文件 MPEG4 = 带有 H.264  视频编码和 AAC  音频编码的 MPEG 4  文件 WebM = 带有 VP8  视频编码和 Vorbis  音频编码的 WebM  文件
如需在 HTML 5  中显示视频,您所有需要的是:
  1. <video src="movie.ogg" controls="controls">
  2. </video>
复制代码
实例参考:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>

  4. <video src="/i/movie.ogg"  width="320"  height="240" controls="controls">
  5. Your browser does not support the video tag.
  6. </video>

  7. </body>
  8. </html>
复制代码
control  属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 <video>  与 </video>  之间插入的内容是供不支持 video  元素的浏览器显示的。

<video>  标签的属性 就算了快点放假受到法律上的风景

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,视频在页面加载时进行预加载,预备播放
如果使用 "autoplay" ,则忽略该属性。
src url 要播放的视频的 URL。
width pixels设置视频播放器的宽度。


HTML 5 音频 HTML 5  提供了播放音频的标准。 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML 5 规定了一种通过 audio  元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。

音频格式 当前,audio 元素支持三种音频格式: Ogg Vorbis 、MP3 、Wav
如需在 HTML 5  中播放音频,您所有需要的是:
  1. <audio src="song.ogg" controls="controls">
  2. </audio>
复制代码
control  属性供添加播放、暂停和音量控件。 <audio>  与 </audio>  之间插入的内容是供不支持 audio  元素的浏览器显示的。
实例 :
  1. <audio controls="controls">
  2.   <source src="song.ogg" type="audio/ogg">
  3.   <source src="song.mp3" type="audio/mpeg">
  4. Your browser does not support the audio tag.
  5. </audio>
复制代码

<audio>  标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。


loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,视频在页面加载时进行预加载,预备播放
如果使用 "autoplay" ,则忽略该属性。
src url 要播放的视频的 URL。









鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 snice 2014-11-8 14:45
楼主发贴辛苦了,谢谢楼主分享!我觉得HTML5星空网是注册对了!

查看全部评论(1)

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 11:51 , Processed in 0.106979 second(s), 38 queries .

返回顶部