小菜鸡的第九篇博客
本系列文章仅仅是对基础的HTML5以及CSS进行讲解,更加详细的内容均会附上链接,以便查阅和版权保护。
今天是周二,停更了两天,本来昨天写了一半的,然后我点了保存,但是今天在看的时候找不到了,心态崩了。。。。。
言归正传
本章节主要讲的是在你的网页中添加视频,歌曲,以及为你的视频,歌曲设置格式,就是这样
- 第三方插件和步入原生
- 视频文件格式
- 在网页中添加单个视频
- 为视频添加空间和自动播放
- 为视频指定循环播放和海报图像
- 阻止视频预加载
- 使用多种来源的视频和备用文本
- 提供可访问性
- 音频文件格式
- 在网页中添加带控件的单个音频文件
- 自动播放,循环播放和预加载音频
- 提供带备用内容的多个视频源
- 添加具有备用Flash的视频和音频
- 高级多媒体
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>
现在就可以自动播放了,
然后还可以添加:
- autoplayd自动播放
- muted静音
- loop循环
- poster海报
- 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 教程
好的,就是这样
花了不到两节课写完,确实没啥东西。