html5 笔记

• 简介
• video 视频
• source 媒体资源
• audio 音频

简介

HTML 5 的一些规则

1. 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
2. 减小对外部插件的需求（好比 Flash）
3. 更优秀的错误处理
4. 更多取代脚本的标记
5. HTML 5 应该独立于设备
6. 开发进程应对公众透明

新特性

1. 用于绘画的 canvas 元素
2. 用于媒介回放的 video 和 audio 元素
3. 对本地离线存储的更好的支持
4. 新的特殊内容元素，好比 article、footer、header、nav、section
5. 新的表单控件，好比 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML 5 特性。Internet Explorer 9 将支持某些 HTML 5 特性。

---

video 视频

用于显示视频资源

示例

<video autoplay controls loop src="http://vjs.zencdn.net/v/oceans.mp4" >
      你的浏览器不支持 video 标签
  </video>
复制代码

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

<video>标签能够插入多个<source>标签。<source>标签能够连接不一样的视频文件。浏览器将使用第一个可识别的格式。

<video autoplay controls loop >
    <source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" >
    <source type="video/ogg" src="http://vjs.zencdn.net/v/oceans.ogg" >
    你的浏览器不支持 video 标签
  </video>
复制代码

video 标签的属性

属性	说明	值
src	指定视频的url	(有效的视频url, 支持Ogg, MPEG 4, WebM 格式)
poster	视频封面,视频加载成功以前显示	(有效的图片url)
autoplay	视频加载后自动播放	autoplay
preload	视频是否预加载。若是设置了`autoplay`属性, 则忽略该设置,使用默认值`auto`	auto(默认值):所有预加载 none:不进行预加载,点击播放才加载。 metadata:部分预加载。
controls	显示播放按钮,音量按钮等控件	controls
loop	循环播放	loop
width/height	宽/高	就是宽高的用法啦

---

source 媒体资源

为媒体元素（好比 <video> 和 <audio>）定义媒体资源。 设置多个source浏览器依次识别资源直到找到可读取的媒体资源,以此可兼容不一样浏览器。如果有的ie依然不支持能够在source后面使用flash标签。

示例

audio:

<audio controls>
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签
</audio>
复制代码

video:

<video autoplay controls loop >
    <source type="video/mp4" src="pretend-to-have-video.mp4" >
    <source type="video/ogg" src="pretend-to-have-video.ogg" >
    你的浏览器不支持 video 标签
  </video>
复制代码

注意:

• 当 audio 和video 标签设置了src属性时，里面的source标签无效。
• source 标签自己不表明任何含义, 单独使用不会出现任何效果

source 标签的属性

属性	说明	值
src	媒体文件的 URL	(有效的媒体url)
type	媒体文件的类型	(有效的图片)
media	指定媒体资源的类型(几乎全部的主流浏览器都不支持 media 属性。)

---

audio 音频

用于播放声音文件或者音频流

示例

<audio src="pretend-to-have-audio.mp3" controls="controls">
  您的浏览器不支持 audio 标签
  </audio>
复制代码

或者

<audio controls="controls">
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
复制代码

audio标签的属性

属性	说明	值
src	指定音频的URL	(有效的音频URL,支持Ogg Vorbis、MP三、Wav等格式)
autoplay	音频加载后自动播放	autoplay
preload	音频是否预加载。若是设置了`autoplay`属性, 则忽略该设置,使用默认值`auto`	auto(默认值):所有预加载 none:不进行预加载,点击播放才加载。 metadata:部分预加载。
controls	显示播放按钮,音量按钮等控件	controls
loop	循环播放	loop

canvas 图形

canvas 经过js绘制图形。 canvas 标签自己没有绘图能力，标签提供一个画布，使用js 来控制画布内的每个像素。

---

参考：
HTML5从入门到精通
HTML 5 video 视频标签全属性详解