前端之旅：《Head First HTML & CSS》12 学习笔记

第12章. html5标记

常用标签

标签	用途
header	定义页面头部内容或某个区块的顶部
footer	定义页面底部内容或某个区块的底部
nav	定义导航
time	表现日期时间, 详细可以查看w3school
section	表示一个由相关内容构成的结构明确的区块
article	表示可以独立于页面上的其余元素进行重用和分发
aside	定义页面的补充内容
video	定义和视频媒体有关的内容

header 和 footer 都不仅仅用于主页眉页脚，如果你希望把一些元素组合起来放在一个首部或尾部中，都可以使用该标签。

Video

video 相关属性：

• src 指定视频位置
• type 说明视频类型
• controls 是布尔属性，用来显示播放控件
• autoplay 是布尔属性，是否加载页面时自动播放
• loop 布尔属性，是否循环播放
• width 和 height 指定显示视频的窗口大小
• poster 可以指定视频的一帧画面或其他图片作为视频封面，视频默认取第一帧画面
• preload 可以细粒度地指定视频加载方式
  • none：在用户真正播放视频之前不下载视频
  • metadata：下载视频元数据，但是不下载视频内容
  • auto：让浏览器自己决定

视频格式

一个视频文件包含两部分，一个视频部分和一个音频部分，每个部分使用一种特定的编码类型来编码，包含视频和音频的文件称为容器，也有自己的格式和格式名。

视频容器类型	视频容器格式	视频编码格式	音频编码格式	支持情况
MP4容器	.mp4	H.264视频编码	ACC音频编码	Safari、IE9、部分Chrome
WebM容器	.webm	Vp8视频编码	Vorbis音频编码	Firfox、Chrome、Opera
Ogg容器	.ogv	Theora视频编码	Vorbis音频编码	Firfox、Chrome、Opera

Demo

简单的使用video播放视频

<video controls autoplay width="320" height="200" src="video/tweetship.mp4" poster="images/poster.png">
</video>

如果要为多种浏览器提供多种视频格式支持，可用 source 列出可用视频格式，浏览器会从上至下查找，对于每个source元素，浏览器会加载每个视频文件的元数据，查看能不能播放这个视频，直到找到它能播放的视频格式。

<video controls autoplay width="320" height="200" poster="images/poster.png">
	<source src="video/tweetsip.mp4"> 
	<source src="video/tweetsip.webm">
	<source src="video/tweetsip.ogv">
	<p>Sorry! your browser doesn't support the video element.</p>
</video>

但是这样做导致浏览器在播放视频之前做了太多检查工作，会影响效率，我们可以为每个 source 提供 type 属性帮助浏览器确定视频类型

<video controls autoplay width="320" height="200" poster="images/poster.png">
    <source src="video/tweetsip.mp4" type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
    <source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <p>Sorry! your browser doesn't support the video element.</p>
</video>

type 属性首先说明了视频文件的MIME类型，然后codecs参数指定哪个编码器对视频和音频编码，来创建编码的视频文件。

如果要支持IE9或其他老版本浏览器用flash，可以在source列表最后添加object元素

其他

• CDN（Content delivery Network）是内容分发网络的简称

问题

1. 导航条中的li元素之间产生了边距，不知为何，看了这篇《去除inline-block元素间间距的N种方法》 后知道这是inline-block导致的，文章中使用了很多方式来解决这个问题，而我采用了在ul的样式中写入display:table;的方式
2. IE9不支持本章节的视频播放，暂未找到理想的解决办法