html5插入视频及封面 html5如何嵌入视频

目录

• 多媒体技术
• 视频嵌入技术

• 视频文件格式
• 视频标签（video）
• 练习

• 音频嵌入技术

• 音频文件格式
• 音频标签（audio）
• 练习

多媒体技术

在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。

在HTML5出现之前，并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。这种方式过于复杂、冗长， 运用HTML5中新增的video标签和audio标签可以避免这样的问题。

在网页中调用多媒体文件的方法主要有两种：

（1）调用本地多媒体文件

（2）调用指定URL地址的互联网多媒体文件

注意：在网页中嵌入音频或视频文件时，一定要注意版权问题，我们尽量选择一些授权使用的音频或视频文件。

视频嵌入技术

视频文件格式

（1）Ogg格式

（2）MPEG4格式(mp4格式)

（3）WebM格式

视频标签（video）

<video src="视频文件路径" controls="controls"></video>

controls属性的取值：

(1)autoplay：自动播放。即页面加载完成后视频文件就开始播放。默认值

(2)loop：循环播放。视频播放结束后重新开始播放

(3)preload：预加载，表示视频文件随着页面一起加载，并预备播放。若使用了’autoplay’,则该属性值忽略

练习

1、插入指定的已知路径的视频(本地多媒体文件)

<video src="../media/people.mp4" controls="autoplay"></video>

2、插入模拟视频

<video controls="autoplay">
    <source src="autoplay" type="mp4">
</video>

src用于指定媒体文件的URL地址，type指定媒体文件的类型。

音频嵌入技术

音频文件格式

（1）Ogg格式

（2）MP3格式

（3）Wav格式

音频标签（audio）

<audio src="音频文件路径" controls="controls"></audio>

controls属性的取值：

(1)autoplay：自动播放。即页面加载完成后自动播放音频

(2)loop：循环播放。音频播放结束后重新开始播放

(3)preload：预加载，表示音频文件随着页面一起加载，并预备播放。若使用了’autoplay’,则该属性值忽略。

练习

1、插入指定的已知路径的音频

<audio src="../media/稻香.mp3" controls="autoplay"></audio>

2、插入模拟音频

<audio controls="autoplay">
    <source src=" " type="mp3">
</audio>