文章目录

前言
一、视频音频嵌入技术概述
- 1、视频格式
- 2、音频格式
二、在HTML5中嵌入视频
- 1、基本语法格式
- 2、浏览器对视频格式的兼容性
- 3、举例
三、在HTML5中嵌入音频
- 1、基本语法格式
- 2、浏览器对音频格式的兼容性
- 3、举例
四、其他属性

前言

在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。

一、视频音频嵌入技术概述

运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。

1、视频格式

包含视频编码、音频编码和容器格式。

常见视频格式：
（1）MPEG格式：英文全称为Moving Picture Experts Group，即运动图像专家组格式，家里常看的VCD、SVCD、DVD就是这种格式。MPEG文件格式是运动图像压缩算法的国际标准，它采用了有损压缩方法，从而减少运动图像中的冗余信息。MPEG的压缩方法说的更加深入一点就是保留相邻两幅画面绝大多数相同的部分，而把后续图像中和前面图像有冗余的部分去除，从而达到压缩的目的。目前MPEG主要压缩标准有MPEG-1、MPEG-2、MPEG-4、MPEG-7与MPEG-21。

(2) QGG格式：Ogg全称是OGG Vorbis，是一种音频压缩格式，类似于MP3等的音乐格式。但有一点不同的是，它是完全免费、开放和没有专利限制的。OGG Vorbis有一个特点是支持多声道。Ogg Vorbis文件的扩展名是.OGG。这种文件的设计格式是非常先进的。创建的OGG文件可以在未来的任何播放器上播放，因此，这种文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

(3) WebM格式：WebM由Google提出，是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了VP8影片轨和 Ogg Vorbis 音轨，其中Google将其拥有的VP8视频编码技术以类似BSD授权开源，Ogg Vorbis 本来就是开放格式。 WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。

2、音频格式

是指要在计算机内播放或是处理音频文件。

常见音频格式：
（1）QGG格式：Ogg全称是OGG Vorbis，是一种音频压缩格式，类似于MP3等的音乐格式。但有一点不同的是，它是完全免费、开放和没有专利限制的。OGG Vorbis有一个特点是支持多声道。Ogg Vorbis文件的扩展名是.OGG。这种文件的设计格式是非常先进的。创建的OGG文件可以在未来的任何播放器上播放，因此，这种文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

（2）MP3格式：Mp3格式诞生于八十年代的德国，所谓的MP3也就是指的是MPEG标准中的音频部分，也就是MPEG音频层。根据压缩质量和编码处理的不同分为3层，分别对应 *.mp1 / *.mp2/ *.mp3 这3种声音文件。需要提醒大家注意的地方是：MPEG音频文件的压缩是一种有损压缩，MPEG3音频编码具有10：1~12：1的高压缩率，同时基本保持低音频部分不失真，但是牺牲了声音文件中12KHz到16KHz高音频这部分的质量来换取文件的尺寸，相同长度的音乐文件，用 *.mp3 格式来储存，一般只有 *.wav 文件的1/10，因而音质要次于CD格式或WAV格式的声音文件。

（3）WAV是最常见的声音文件格式之一，是微软公司专门为Windows开发的一种标准数字音频文件，该文件能记录各种单声道或立体声的声音信息，并能保证声音不失真。但WAV文件有一个致命的缺点，就是它所占用的磁盘空间太大（每分钟的音乐大约需要12兆磁盘空间）。它符合资源互换文件格式（RIFF）规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持。Wave格式支持MSADPCM、CCITT A律、CCITT μ律和其他压缩算法，支持多种音频位数、采样频率和声道，是PC机上最为流行的声音文件格式；但其文件尺寸较大，多用于存储简短的声音片段。

二、在HTML5中嵌入视频

1、基本语法格式

代码如下：

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

属性	值	描述
autoplay	autoplay	当页面载入完成后自动播放视频。
loop	loop	视频结束时重新开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
poster	url	当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。

2、浏览器对视频格式的兼容性

虽然html5支持Ogg、MPEG 4和WebM的视频格式，但各浏览器对这些格式却不完全支持，所以一定要注意浏览器对视频格式的兼容性。

浏览器	版本	支持格式
IE	9.0+	MP4
Chrome	6.0+	MP4,WebM,Ogg
Firefox	3.6+	WebM,Ogg
Safari	5.0+	MP4
Opera	10.0+	WebM,Ogg

3、举例

代码如下：

<!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>
<body><video src="./video/mailang.webm" width="500px" height="400px" controls autoplay loopposter="./images/小树.png"></video>
</body>
</html>

三、在HTML5中嵌入音频

1、基本语法格式

代码如下：

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

属性	值	描述
autoplay	autoplay	当页面载入完成后自动播放音频。
loop	loop	音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性

2、浏览器对音频格式的兼容性

虽然html5支持Ogg、MP3和Wav的音频格式，但各浏览器对这些格式却不完全支持，所以一定要注意浏览器对音频格式的兼容性。

浏览器	版本	支持格式
IE	9.0+	MP3,AAC
Chrome	6.0+	Ogg Vorbis,MP3,WAV(9.0+)
Firefox	3.6+	Ogg Vorbis,WAV
Safari	5.0+	MP3,AAC,WAV
Opera	10.0+	Ogg Vorbis,WAV

3、举例

代码如下：

<!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>
<body><audio src="./audio/王嘉尔 - 100 Ways.mp3" controls loop autoplay></audio>
</body>
</html>

四、其他属性

在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。当音频或视频1播放完后，会自动播放下一个文件。
基本格式：

<audio controls="controls"><source src="音频文件地址" type="媒体文件类型/格式"><source src="音频文件地址" type="媒体文件类型/格式">……
</audio>

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

举例如下：

<!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>
<body><audio  controls loop autoplay><source src="./audio/王嘉尔 - 100 Ways.mp3" type="audio/mp3"><source src="./audio/mailang.mp3" type="audio/mp3"></audio>
</body>
</html>

注意：

页面中嵌入多媒体文件的方式：
(1)本地的多媒体文件；
(2)网络上的多媒体文件。

css进阶四（多媒体嵌入）相关推荐

JavaScript进阶(四)
JavaScript进阶(四) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务学习要点使用模块构架应用创建和使用服务为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
文章目录一.前言二.优化建议三.实施方案 3.1 优化项目结构,减小项目组包体积 3.2 去除项目冗余字体文件 3.2.1 字体筛选 3.2.2 字体压缩 3.3 gzip压缩 3.4 ETag ...
【前端学习】D3：CSS进阶
文章目录前言系列文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级(*) 2 盒子模型 2.1 看透网页布局的本质 2.2 盒子模型(Box Model)的组成 2.3 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...
前端开发注意事项(HTML与CSS进阶)
HTML 与 CSS 进阶 Img 标签 alt 属性一定要添加用于图片描述给机器看的,如果图片加载失败,会显示 alt <img src="" alt="& ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...

css进阶四（多媒体嵌入）

文章目录

前言

一、视频音频嵌入技术概述

1、视频格式

2、音频格式

二、在HTML5中嵌入视频

1、基本语法格式

2、浏览器对视频格式的兼容性

3、举例

三、在HTML5中嵌入音频

1、基本语法格式

2、浏览器对音频格式的兼容性

3、举例

四、其他属性

css进阶四（多媒体嵌入）相关推荐

最新文章

热门文章