HTML5中的多媒体

最新推荐文章于 2020-12-01 17:14:37 发布

而又何羡乎

最新推荐文章于 2020-12-01 17:14:37 发布

阅读量678

点赞数 1

分类专栏： WEB前端学习文章标签： html

本文链接：https://blog.csdn.net/qq_44285092/article/details/108628169

版权

WEB前端学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

1 网页音频标签

1.1 audio标签概述

audio主要是定义播放声音文件或者音频流的标准。支持3种音频格式，分别为Ogg、MP3和Wav。在html5中播放音频，其格式如下：

<audio src="song.mp3" controls="controls"></audio>

属性值	说明
src	规定要播放的音频地址
controls	添加播放、暂停和音量的控件

在<audio></audio>之间插入的内容不支持audio元素的浏览器显示。

1.2 audio标签的属性

属性	值	描述
autoplay	autoplay（自动播放）	若出现该属性，音频在就绪后马上播放
autoplay	controls（控制）	若出现该属性，向用户显示控制，如播放、暂停和音量等控件
autoplay	loop（循环）	若出现该属性，每当音频播放结束时重新开始播放
autoplay	preload（加载）	若出现该属性，这音频在页面加载是进行加载，并预备播放。若使用"autoplay"，则忽略该属性
autoplay	url（地址）	要播放的音频的URL地址
autobuffer	autobuffer（自动缓冲）	在网页显示时，该二进制属性表示由用户代理（浏览器）自动缓冲的内容，还是由用户使用相关API进行内容缓冲

此外，audio标签还可以通过source属性添加多个音频文件，具体格式如下：

<audio controls="controls">
<source src="123.ogg" type="audio/ogg">
<source src="123.mp3" type="audio/mpeg">
</audio>

1.3 音频解码器

音频解码器定义了音频数据流编码和解码的算法，其中，编码器住哟啊对数据流进行编码操作，用于储存和传输；音频播放器主要对音频文件进行解码，然后进行播放操作等。目前用的多的音频解码器是Vorbis和ACC。

2 网页视频标签video

2.1 video标签概述

video标签主要定义播放视频文件或者视频流的标准，支持Ogg、WebM和MPEG4三种格式。其使用基本格式与audio类似。

2.2 video标签的属性

属性	值	描述
autoplay	autoplay（自动播放）	若出现该属性，视频在就绪后马上播放
controls	controls（控制）	若出现该属性，向用户显示控制，如播放、暂停和音量等控件
controls	loop（循环）	若出现该属性，每当视频播放结束时重新开始播放
controls	preload（加载）	若出现该属性，则视频在页面加载是进行加载，并预备播放。若使用"autoplay"，则忽略该属性
controls	url（地址）	要播放的音频的URL地址
width	宽度值	视频播放器的宽度
height	高度值	视频播放器的高度
poster	url	当视频未响应或者缓冲不足时，该值属性链接到一个图像。该图像以一定的比例显示出来

根据以上属性表，可以看出可以自定义视频文件显示的大小，例如让视频以320像素x240像素大小显示，加入height和width属性，其具体格式如下：

<video width="320" height="240" controls src="123.mp4"></video>

此外，video标签还可以通过source属性添加多个视频文件，其格式如下：

<video controls="controls">
<source src="123.ogg" type="video/ogg">
<source sec="123.mp4" type="video/mp4">
</video>

2.3 视频解码器

视频解码器定义了视频数据流编码和解码的算法。其中，编码器主要是对数据进行编码操作，用于存储和传输；视频播放器主要是对视频进行解码，然后进行播放操作。目前，于HTML5中使用最多的解码文件是Theora、H.264和VP8。

3 添加网页音频文件

3.1 设置背景音乐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置本地背景音乐</title>
</head>
<body>
<audio src="1.flac" controls="controls"></audio>
</body>
</html>

3.2 设置音乐循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置本地背景音乐</title>
</head>
<body>
<audio loop="loop" controls="controls">
    <source src="1.flac">
</audio>
</body>
</html>

4 添加网页视频文件

4.1 为网页添加视频文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<video src="1.mp4" controls="controls">您的浏览器不支持video标签。</video>
</body>
</html>

4.2 设置自动运行

登录网页时常常会看到一些视频文件直接开始运行，不需要手动开始，特别是一些广告内容，是通过autoplay来实现的，其语法如下：

<video muted src="URL" autoplay="autoplay"></video>

muted 规定视频的音频输出应该被静音。windows加上才能自动播放，其原因不详。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放</title>
</head>
<body>
<video muted src="1.mp4" autoplay="autoplay" controls></video>
</body>
</html>

4.3 设置视频文件循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放</title>
</head>
<body>
<video loop="loop" autoplay="autoplay" controls>
    <source src="1.mp4">
</video>
</body>
</html>

4.4 设置视频文档的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放</title>
</head>
<body>
<video loop="loop" autoplay="autoplay" controls width="1500" height="800">
    <source src="1.mp4">
</video>
</body>
</html>

5 添加网页滚动文字

5.1 网页滚动文字标签的使用

用marquee标记可以将文字设置为动态滚动效果，而且可以设置文字的字体和颜色，通常在<font>标记中出现。marquee独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字滚动</title>
</head>
<body>
<font size="10" color="red"><marquee>行百里者半九十</marquee></font>
</body>
</html>

5.2 marquee标签的属性

属性	值	描述
direction（滚动方向）	left	向左滚动，与默认设置相同
direction（滚动方向）	right	向右滚动
direction（滚动方向）	up	向上滚动
direction（滚动方向）	down	向下滚动
behavior（滚动方式）	scroll	循环滚动
behavior（滚动方式）	alternate	来回循环滚动
behavior（滚动方式）	slide	内容滚动一次即停止，不会循环
scrollamount（滚动速度）	scrollamount=10	滚动速度为值(10)像素
scrolldelay（内容滚动的时间间隔）	scrolldelay=10	移动间隔为10ms
loop（滚定循环）	loop="循环次数"	滚动循环次数后停止滚动
滚动范围	width=500	滚动水平范围为500
滚动范围	height=50	滚动垂直范围为50
bgcolor（滚动背景色）	颜色代码：red	设置滚动背景色为红色
设置空白空间	hspace=70	水平为70像素的空白空间
设置空白空间	vspace=70	垂直为70像素的空白空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字滚动</title>
</head>
<body>
<font size="10" color="red"><marquee behavior="alternate" bgcolor="blue" hspace=100 vspace=20>行百里者半九十</marquee></font>
</body>
</html>