小菜鸡的html初步教程（第十七章 视频，音频和其他多媒体）

小菜鸡的第九篇博客

 本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
 今天是周二，停更了两天，本来昨天写了一半的，然后我点了保存，但是今天在看的时候找不到了，心态崩了。。。。。

言归正传

 本章节主要讲的是在你的网页中添加视频，歌曲，以及为你的视频，歌曲设置格式，就是这样

1. 第三方插件和步入原生
2. 视频文件格式
3. 在网页中添加单个视频
4. 为视频添加空间和自动播放
5. 为视频指定循环播放和海报图像
6. 阻止视频预加载
7. 使用多种来源的视频和备用文本
8. 提供可访问性
9. 音频文件格式
10. 在网页中添加带控件的单个音频文件
11. 自动播放，循环播放和预加载音频
12. 提供带备用内容的多个视频源
13. 添加具有备用Flash的视频和音频
14. 高级多媒体

1. 第三方插件和步入原生

  这个没啥好说的，就是关于在html自带的东西外引入其他的东西

2. 视频文件格式

 （真的，我不得不说，也不知道是微软的毛病，还是蓝牙鼠标的毛病，我的蓝牙鼠标，只要你半分钟不碰它，他就能和电脑脱离联系，一定要拨弄半天才能连上，但是用起来又没什么毛病。。。。）
 视频文件格式无非就是.ogg,.ogv,.mp4巴拉巴拉的

3. 在网页中添加单个视频

<video src="Imagine Dragons - Natural.mp4"width="1800" height="960"></video>

 用这一行代码就可以在网页放置你的视频了，但是，如果你真的这个干，你会发现，放不了，这个时候你就需要该成（加了一个autoplay）

<video src="Imagine Dragons - Natural.mp4"width="1800" height="960"autoplay></video>

  现在就可以自动播放了，
 然后还可以添加：

1. autoplayd自动播放
2. muted静音
3. loop循环
4. poster海报
5. preload预加载

4. 为视频添加空间和自动播放

 emmm这里讲的就是上面提到的，不过将代码加上了controls控件

<video src="Imagine Dragons - Natural.mp4"width="1800" height="960"autoplay controls></video>

5. 为视频指定循环播放和海报图像

<video src="Imagine Dragons - Natural.mp4"width="1800" height="960"autoplay loop></video>

 这个时候，你的视频就可以自动播放且循环播放了
 然后

<video src="Imagine Dragons - Natural.mp4"width="900" height="560" controls poster="natural.png" loop></video>

 当我为视频指定了海报之后，他就能在开始的时候加载我所放置的图片了
 （我刚刚一直在疑惑controls控件时干嘛的，然后才发现，这个是用来添加进度条的。。。。。。。。。）

6. 阻止视频预加载

<video src="Imagine Dragons - Natural.mp4"width="900" height="560" controls preload="none"></video>

 上图就是当我设置了不预加载的界面，这样做可以提升网页加载速度，节省用户的流量（我瞎说的，我什么都不知道）

7. 使用多种来源的视频和备用文本

<video width="656" height="522" controls>
<source src="Imagine Dragons - Natural.mp4"
type="video/mp4">
<source src="Imagine Dragons - Natural.webm"
type="video/webm">
<p> <a href="Imagine Dragons - Natural.mp4">download the video</a></p>
</video>

 这个样子就可以为视频源添加多个来源，以免某种格式在浏览器中不能显示。

8. 提供可访问性

 这个没啥讲的

9. 音频文件格式

 这个也没啥讲的

10. 在网页中添加带控件的单个音频文件

 用法类似

<audio src="许嵩 - 摄影艺术.mp3" controls>

 然后你还可以为这个添加和视频类似的循环播放，预加载，自动播放控件。

11. 自动播放，循环播放和预加载音频

 既然上面我已经说了和视频类似，为什么还要单独提出来呢

<audio src="许嵩 - 摄影艺术.mp3" controls preload="metadata">

 这个也是预加载，但是他只会加载音频的数据，例如音频的长度之类的，不会全部加载。

12. 提供带备用内容的多个视频源

 这个和上述的视频添加备用源类似

13. 添加具有备用Flash的视频和音频

 emmm
 众所周知（我是这么觉得的）flash已经落后了

14. 高级多媒体

 这个将引入canvas
 HTML 5 Canvas 参考手册
 SVG
 SVG 教程
 好的，就是这样
 花了不到两节课写完，确实没啥东西。