多媒体嵌入
- 前言
- 视频音频嵌入技术概述
- 浏览器对HTML5中video和audio元素的支持
- 在HTML5中，video标签的使用
- 在HTML5中，audio标签的使用
- 视频音频文件的兼容性问题
- 调用网络音频视频文件
- 练习
前言
在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。
在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。
视频音频嵌入技术概述
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。
视频格式包含视频编码、音频编码和容器格式。（Ogg,MPEG4,WebM）
音频格式是指要在计算机内播放或是处理音频文件。(Ogg,MP3,Wav)
浏览器对HTML5中video和audio元素的支持
| 浏览器 | 支持版本 |
|---|---|
| IE | 9.0及以上版本 |
| Frefox | 3.5及以上版本 |
| Opear | 10.5及以上版本 |
| Chrome | 3.0及以上版本 |
| Safari | 3.2及以上版本 |
在HTML5中，video标签的使用
<video src="视频文件路径" controls="controls"></video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放视频。 |
| loop | loop | 视频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| poster | url | 当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。 |
在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。
注意：
通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。
在HTML5中，audio标签的使用
<audio src="音频文件路径" controls="controls"></audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放音频。 |
| loop | loop | 音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
注意：
在网页中嵌入音频或视频文件时，一定要注意版权问题，我们尽量选择一些授权使用的音频或视频文件。
视频音频文件的兼容性问题
调用网络音频视频文件
在网页中调用多媒体文件的方法主要有两种：
（1）调用本地多媒体文件
（2）调用指定url地址的互联网多媒体文件
调用本地音视频文件虽然方便，但需要使用者提前准备好文件，这样准备文件十分麻烦（需要下载文件，上传文件等操作），这时就可以为src属性设置一个完整的URL，直接调用网络中的音、视频文件。
练习
// A code block
var foo = 'bar';
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box{width: 99vw;height: 99vw;}.video{position: absolute;top: 0vw;left: 0vw;}.cd{width: 600px;height: 600px;position: absolute;top: 12vw;left: 10vw;z-index: 2;border-radius: 50vw;border: 5px solid yellowgreen;box-shadow: 15px 5px 15px yellow inset;background-image: url(./images/cd_img.jpg); background-size: cover;background-repeat: no-repeat;}.center{width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;border-radius: 50%;border:5px solid #FFF;z-index: 3;background-color: black;background-image: url(./images/yinfu.gif);background-position: center center;background-repeat: no-repeat;}.song{position: absolute;left: 50vw;top: 10%;}@font-face{font-family:MD; src:url(./font/MD.ttf);}h2{font-family:MD; font-size:110px; color:#913805;}p{width: 600px;height: 300px;font-family: MD;font-size: 30px;padding-left: 30px;line-height: 30px;background-image: url(./images/bg.png);background-repeat: repeat-x;box-sizing: border-box;}
</style>
<body><div class="box"><video src="./video/mailang.webm" muted autoplay controls loop class="video"></video><div class="cd"><div class="center"></div></div><div class="song"><h2>风中的麦浪</h2><marquee direction="up"><p>爱过的地方<br/>当微风带着收获的味道<br/>吹向我脸庞<br/>想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯…啦…嗯…啦…<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p></marquee><audio src="./music/mailang.mp3" autoplay c></audio></div></div>
</body>
</html>
