《HTML5+CSS3网页制作》课件-模块八 网页多媒体

模块八网页多媒体任务1视频与音频网页制作CSSHTML知识准备——视频与音频实战演练——制作“音乐播放器”网页视频与音频0201进阶训练——制作“视频播放”网页03动手实践——制作“自制视频播放器”网页04

1.了解视频与音频的编码与解码

2.了解视频与音频的文件类型

3.掌握audio元素的语法、常用属性，能够在网页中添加音频文件

4.掌握video元素的语法、常用属性，能够在网页中添加音频文件

5.了解使用DOM控制audio和video对象视频与音频学习目标：

1.培养负责任的数字公民，使其在多媒体内容创作和分享中尊重版权、保护隐和选择适宜性内容。

2.培养创新意识和勇于探索精神，使其将个人专业成长与国家科技发展战略紧密结合，为国家科技进步贡献力量。

3.引导成为终身学习者，使其保持好奇心，主动学习新技术和工具，培养适应未来职场变化的能力。视频与音频思政目标：

1知识准备--课程引入

2想象一下我们需要多少数据来存储未经压缩的视频：全色彩的高清视频（1920x1080）每一帧为8,294,400字节。按照典型的每秒30帧的传播速度，高清视频每秒钟会占用248,832,000字节（约249MB）。一个相当典型的30分钟视频会议将需要约447.9GB的存储空间，而2小时的电影则需要将近1.79

TB（也就是1790GB）

的存储空间。“运输一个装满水和鱼的鱼缸，运输时可以仅保留最少的水，‘放水’即为编码压缩，‘重新添水’为解码重建。1知识准备--编码与解码1知识准备--编码与解码

编解码器编解码器全称所支持的容器格式AACAdvancedAudioCodingMP4,

ADTS,

3GPFLACFreeLosslessAudioCodecMP4,

Ogg,

FLACMP3MPEG-1AudioLayerIIIMP4,

ADTS,

MPEG,

3GPOpusOpusWebM,

MP4,

OggVorbisVorbisWebM,

Ogg1知识准备--编码与解码

3AAC是高级音频编码(AdvancedAudioCoding)的缩写，AAC可以在比MP3文件缩小30%的前提下提供更好的音质。FLAC

(

FreeLosslessAudioCodec

)是一种无损音频编解码器，由X基金会.

它提供了良好的压缩率，而不会损失音频保真度；由于压缩算法是专门为音频设计的，因此与使用通用压缩算法相比，它可以提供更好的结果。FLAC是需要原始质量和音调准确性的较小音频效果文件以及音乐存档的绝佳选择。MP3是“MPEG-1音频层3”的简称，由国际标准化组织(ISO)和国际电信联盟(ITU-T)共同提出，可以将音频以1：10甚至1：12的压缩率进行压缩，能够在音质丢失很小的情况下把文件压缩到更小的程度。而且还非常好的保持了原来的音质。正是因为MP3体积小，音质高的特点使得MP3格式几乎成为网上音乐的代名词。Opus是一种完全开放的音频格式；可以有效地处理低复杂度的音频，支持多种压缩算法，甚至可以在同一个音频文件中使用多个算法。它是一款出色的全方位音频编解码器，可用于您的Web应用程序，可用于您想到的任何音频任务。Vorbis是一种新的音频压缩格式，由Xiph基金会提出，类似于MP3等技术，其最大优势是支持多声道。1知识准备--编码与解码

41知识准备--编码与解码

4H.264/AVC是由国际标准化组织(ISO)和国际电信联盟(ITU-T)共同提出，是以H.26x系列命名的视频编码标准之一，它是继MPEG4之后的新一代视频压缩技术。H.265/HEVC是新一代视频编解码国际标准，由ISO与ITU共同制定，它主要是为在保证视频质量的情况下提高压缩率、降低网络带宽，它支持更大的视频尺寸，更精细的编码控制，用于对视频要求更高的场合。VP8是第八代的On2视频技术，由Google提出，能以更小的数据容量，提供更高质量的视频，而且只需较小的处理能力即可播放视频。VP9是Google开发的旧版VP8标准的继承者。与VP8一样，VP9是完全开放且免版税的。其编解码性能与AVC相当或略快，但质量更好。VP9的编码视频质量可与类似比特率的HEVC相媲美。AV1是开放媒体联盟（AllianceforOpenMedia）推出的专门用于网络视频。它实现了比VP9和H.265/HEVC更高的数据压缩率，比AVC高出50%之多。AV1是完全免版税的，专为<video>元素和WebRTC使用而设计。1知识准备--编码与解码

4德国服劳恩霍夫通讯技术研究所(FraunhoferHHI)2020年7月6日正式宣布了下一代视频编解码标准H.266/VVC（VersatileVideoCoding）制定完成。相比前代标准（H.265/HEVC），H.266进一步提高了压缩性能，可支持在视频清晰度不变的同时为用户减少50%的数据大小。例如，90分钟的超高清视频（H.265/HEVC）大约需要10GB的数据，而H.266仅需要5GB就可以做到这一点。H.266/VVC是专为4K和8K流媒体而构建的一代新标准，其将帮助用户在设备上存储更多的高清视频，并减少网络上的数据使用量。1知识准备--编码与解码

4图:已经得到批准并被纳入VVC标准的各公司贡献份额(IPlytics，2021年2月)2021年3月，著名知识产权媒体IAM发表的《谁在领跑VVC技术竞赛》报道指出，在新一代视频编解码标准H.266/VVC的专利权划分中，技术贡献将成为衡量各公司所占份额和影响力的一个尺度，高通、华为和字节跳动在VVC标准定稿过程中获得批准的技术提案数量排名前三位。1知识准备--编码与解码

5AVS-1与H.264/AVC性能相当AVS-2与HEVC（H.265）性能相当2019年1月28日，AVS-3第一版本已经制定完成1知识准备--编码与解码

5该项目突破了传统视频编码和计算框架，形成了完全自主的编解码技术体系，主导制定了我国超高清视频编码标准GB/T33475.2-2016等AVS系列标准，被全球超高清联盟采纳为国际通用格式，在VVC/H.266等国际标准制定中掌握了重要话语权，研制了自主的超高清实时编码器和解码芯片，形成了“技术标准-芯片终端-系统应用”的完整产业链。1知识准备--编码与解码

1MediaInfo/

MediaInfo是一款非常实用的视频参数检测工具，除了可以对视频进行编码分析查询，还可以对音频文件的编码及信息进行检测，该款工具软件是一款免费软件。1知识准备--文件类型

1知识准备--文件类型

21知识准备--文件类型

3

包含视频轨道，音频轨道和文本轨道，其中视频轨道包含一个主视频轨道和一个可选的Angle轨道；音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道；文字轨道包含英语和西班牙语的字幕轨道。1知识准备--文件类型

31知识准备--文件类型

3WebM由Google提出，旨在提供免版税、高质量的开放式视频压缩格式，用于HTML5视频。它支持VP8、VP9和AV1视频编解码器和Vorbis、Opus音频编解码器。MPEG-4（MP4）是MPEG文件格式的最新版本。本规范第1部分和第14部分中定义了两种格式。MP4是当今流行的容器，因为它支持几种最常用的编解码器，并且得到广泛支持。Ogg是一种开源免费的多媒体容器格式。Ogg容器格式可以用于封装音频、视频、字幕、以及多媒体元信息。它既适用于流媒体传输，又能作为文件格式存储多媒体。在标准制定的早期，Ogg专门用来封装Vorbis编码格式的语音，不过随着技术的发展，Ogg被单独提出来作为一种可以封装任意媒体类型的容器格式。MPEG文件格式是流行的有损音频压缩格式，最常见的用途可能是包含Layer_III/MP3声音数据；由此产生的文件是世界各地数字音乐设备使用的广受欢迎的MP3文件。FLAC流行的无损音频压缩格式，该格式不受任何专利的限制，因此其使用不会受到干扰。FLAC文件只能包含FLAC音频数据。1知识准备--文件类型

41知识准备--文件类型

4

但是，这些MIME类型中的每一种都是模糊的。所有这些文件类型都支持各种编解码器，这些编解码器可能具有任意数量的配置文件、级别和其他配置因素。因此，您可以将codecs参数添加到媒体类型。

为此，请附加一个分号(

;)

codecs=，然后附加描述文件内容格式的字符串。某些媒体类型只允许您指定要使用的编解码器的名称，而其他媒体类型也允许您指定对这些编解码器的各种约束。您可以通过用逗号分隔来指定多个编解码器。video/webm;codecs="vp8,vorbis"video/webm;codecs="vp9,opus"1知识准备--文件类型

1知识准备--文件类型Src属性：1audio元素用于播放音频，它的基本语法结构如下：<audio

src=“音频的URL"controls="controls">

</audio>绝对URL：提供要显示音频的URL相对URL：1知识准备--audio元素1controls属性：1audio元素用于播放音频，它的基本语法结构如下：<audio

src=“音频的URL"controls="controls">

</audio>设置是否使用播放控件。HTML5audio元素的属性可以省略属性值的有：controls、loop、autoplay、muted，如果完全省略这个属性，则表示该属性的属性值为false。<audio

src=“音频的URL"controls>

</audio>知识准备--audio元素12

谷歌浏览器在用户体验和安全性方面做出自己的限制，默认阻止音视频的自动播放。autoplay属性:该属性表示音频会尽快自动播放，不会等待整个音频文件下载完成。如果不设置该属性，音频不会自动播放。知识准备--audio元素12loop属性：用来设置音频播放结束时重新开始播放。它可能具有以下值之一：•none

-表示不预加载音频•metadata-表示只预加载音频元数据

•auto-表示预加载整个音频文件prelode属性：用来告诉浏览器要预加载的数据。muted属性：用来设置音频播放时为静音状态。知识准备--audio元素12案例：为网页添加背景音乐

为网页添加背景音乐“beiduofen.mp3”,设置为无限循环。分析：背景音乐不需要显示播放控件，不需要添加controls属性，不显示播放控件就需要添加autoplay属性让背景音乐自动播放，自动播放的音乐不需要预加载，那么就不需要添加prelode属性，在播放时不需要静音，也就不需要添加muted属性，无限循环播放我们需要添加loop属性。背景音乐会循环播放，我们每刷新一次网页，音乐会重新播放<audio

src="audio/beiduofen.mp3"

autoplay

loop></audio>知识准备--audio元素13

虽然百分之98.26的浏览器都支持audio元素，但是用户所使用的浏览器却千差万别，肯定会出现不支持的情况，可以在audio元素的开始标签和结束标签间添加提示信息，用以提醒用户不能播放的原因，或用来检查当前浏览器对音频的支持情况。知识准备--audio元素13<audio

src="audio/beiduofen.mp3"

autoplay

controls>

对不起，您的浏览器不支持audio元素，<br>

您可以通过下载的方式来播放！<br>

<a

href=”audio/beiduofen.mp3”>MP3格式的《月光奏鸣曲》下载连接</a>

</audio>案例：检查浏览器支持情况在不同浏览器中播放一段mp3格式的《月光奏鸣曲》，以便检查浏览器对audio元素的支持情况。浏览器支持audio元素时运行效果图浏览器不支持audio元素时运行效果图知识准备--audio元素1

4Source元素及常用属性Src属性：提供要显示音频的URLType属性：播放音频的MIME类型，主要类型有:audio/ogg、audio/mp3audio/mpeg、audio/wav等。该属性最好不要省略，否则浏览器在从上向下选择音频时会因为无法判断自己能不能播放音频而先行下载一小段音乐，从而浪费带宽和时间。

<audio

autoplay

controls>

<source

src="audio/horse.ogg"

type="audio/ogg">

<source

src="audio/horse.mp3"

type="audio/mp3">

对不起，您的浏览器不支持audio元素，<br>

您可以通过下载的方式来播放！<br>

<a

href=”audio/horse.mp3”>MP3格式的《horse》下载连接</a>

</audio>在本例中，浏览器先判断是否支持ogg格式，若支持就播放horse.ogg文件，否则继续判断是否支持mp3格式，支持则播放horse.mp3,若两种格式都不支持，就不能正常播放。如果Web浏览器不支持audio元素，就会显示audio元素的内容。知识准备--audio元素1Src属性：1video元素用于播放视频，它的基本语法结构如下：<video

src=“视频的URL"controls="controls">

</video>提供要显示视频的URL。controls属性：设置是否使用播放控件。知识准备--video元素12video元素的两个基本属性只能满足在网页中播放视频的基本需求，video元素还有其他一些属性，用来进一步优化视频播放效果。其中autoplay属性、loop属性、preload属性、muted等属性的含义和用法与audio标签相同，相比audio元素，width属性、height属性和poster属性是video元素独有的。知识准备--video元素12width属性:该属性用来设置视频画面的宽度。height属性:该属性用来设置视频画面的高度。width和height属性的单位都是像素。注意：如果这两个属性都没有使用，将使用视频的默认宽度和高度。如果只使用了其中一个属性，浏览器将自动调整另一个属性的大小以保留视频的纵横比。知识准备--video元素1例如下面代码中，不使用width和height属性，视频画面按原始尺寸播放。<videosrc="video/movie.mp4"controlsautoplay></video>在刚才代码的基础上。新增width和height属性，且属性值小于原始尺寸，视频画面被缩小到指定尺寸播放。<videosrc="video/movie.mp4"width="900px"height="500px"controlsautoplay></video>2poster属性:该属性用来设置视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。通常用于粗略的预览或者广告。注意:设置预设图片时尺寸与视频画面尽量相同，或宽度高度比例一致，避免图片按视频尺寸被输出而变形。。不设置预设图片设置了预设图片

<video

src="video/movie.mp4"

width="640px"

height="384px"

controls

>

</video><video

src="video/movie.mp4"

width="640px"

height="384px"

controls

poster="img/movie.jpg"

>

</video>知识准备--video元素1

3Source元素与音频一样，由于不同浏览器对视频格式的支持情况不同，在不知道用户浏览器的情况下，可以在video元素中使用source元素指定多种视频文件格式，浏览器按照代码的先后顺序，选择第一个可识别的编码。Source元素有两个主要属性，一个是Src属性，功能和video元素的Src属性是一样的。另一个是Type属性，主要是给出播放视频的MIME类型，主要类型有:video/webm、video/mp4、video/ogg等，由于同一种视频格式里面的视频编解码器或音频编解码器可以是不一样的，我们可以将codecs参数添加进去写成：type='video/webm;codecs="vp9,opus"'的形式。知识准备--video元素1

3代码执行过程为：使用source元素在设置多个视频来源，浏览器会检查是否支持mp4格式，若支持就播放该格式视频，否则继续判断是否支持webm格式,支持则播放webm视频…依次判断下去，若没有文件格式可支持，视频就不能正常播放。<video

width="640px"

height="384px"

controls

>

<source

src="video/flower.mp4"

type='video/mp4;codecs="avc1.4d002a"'>

<source

src="video/flower.webm"

type='video/webm;codecs="vp8,vorbis"'>

<source

src="video/flower.webm"

type='video/webm;codecs="vp9,opus"'>

</video>知识准备--video元素1

4使用网络视频资源可以通过以下两种方式：

第一种方式是直接从Web网站上链接视频到当前页面，只要把video元素或source元素的URL路径改为网络链接地址即可，这样就不用先下载再嵌入。

第二种方式是一些在线视频提供商例如优酷、Bilibili等提供现成的代码用于为你的web网页嵌入视频。获取网络视频资源的网络链接地址获取在线视频平台提供的嵌入代码知识准备--video元素1

4<video

src="/i/movie.mp4"

controls

></video><iframe

src="///player.html?isOutside=true&aid=585465570&bvid=BV1hz4y1k7jf&cid=262150483&p=1"

scrolling="no"

border="0"

frameborder="no"

framespacing="0"

allowfullscreen="true">

</iframe>知识准备--video元素1

4知识准备--video元素1在使用网络视频资源时，需要注意的事项：（1）确保视频资源的合法使用权限选择嵌入的网络视频时，务必确认视频内容是可以合法共享或公开使用的。（2）考虑视频链接的稳定性和可靠性直接链接外部视频文件时，需意识到视频托管站点的稳定性和持久性对自己网页的影响。

实战演练—制作“音乐播放器”网页2本次任务主要是利用audio元素、flex布局、流式布局等知识点完成“音乐播放器”的制作，分为上部的左右两部分（左侧图片和右侧歌词）以及下部的音频控件。并要求能适应不同尺寸的浏览器宽度。预览效果如下图所示。

实战演练—制作“音乐播放器”网页2“音乐播放器”制作思路为用一个类名为player-container的div元素作为容器，再在类名为player-container的div元素里创建两个div,一个是类名为upper-part，用于“音乐播放器”的上部布局，一个是类名为lower-part，用于“音乐播放器”的下部布局。上部左部用一个类名为left-panel的div,包含一个img元素实现音乐图片部分，右部用一个类名为right-panel的div,包含h2和p元素实现歌词部分。下部用audio元素实现音频控件。通过流式布局实现网页能适应不同尺寸的浏览器宽度。

可以分成四步来完成：首先制作“音乐播放器”的HTML结构代码；其次编写基础CSS代码；接着通过弹性布局实现“音乐播放器”上部；最后设置下部样式。

进阶训练—制作“视频播放器”网页3本次任务主要是利用video元素、button元素、video对象的属性、video对象的方法和video对象的事件、JavaScript等知识点完成“视频播放器”的制作，分为上下两部分，上部为按钮区以此为“播放”、“放大”、“缩小”和“普通”四个按钮，单击“播放”按钮后，按钮名称就变成了“暂停”；下部为视频区域，视频本身不带播放控件，受上部按钮的播放、暂停以及调整尺寸控制。预览效果如右图所示。

进阶训练—制作“视频播放器”网页3使用DOM控制audio和video对象audio和video对象是audio和video元素在JavaScript中对应的对象模型。HTML5DOM为audio和video对象提供了方法、属性和事件。通过这些方法、属性和事件，开发者可以创建自定义的播放控制界面，实现播放、暂停、音量控制、进度条显示等功能，并能响应播放过程中的各种状态变化，从而为用户提供更加丰富和交互式的多媒体体验。

进阶训练—制作“视频播放器”网页3HTML5为audio/video对象提供了一系列事件，使得开发者能够监听和响应多媒体内容的播放、暂停、加载、结束等多种状态变化。

事件描述canplay当浏览器可以开始播放音频/视频时触发canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发durationchange当音频/视频的时长已更改时触发ended当目前的播放列表已结束时触发loadeddata当浏览器已加载音频/视频的当前帧时触发loadedmetadata当浏览器已加载音频/视频的元数据时触发loadstart当浏览器开始查找音频/视频时触发pause当音频/视频已暂停时触发play当音频/视频已开始或不再暂停时触发progress当浏览器正在下载音频/视频时触发volumechange当音量已更改时触发

进阶训练—制作“视频播放器”网页3

下面通过案例8-9演示使用play事件为视频添加开始播放事件，当视频开始播放时弹出“欢迎观看视频，调整好坐姿，准备进入精彩的世界！”的文字提升。

<videosrc="video/friday.mp4"width="320px"height="240px"controlsid="myVideo"></video><script>document.getElementById("myVideo").addEventListener("play",function(){alert("欢迎观看视频，调整好坐姿，准备进入精彩的世界！");});</script>

进阶训练—制作“视频播放器”网页3

audio/video对象提供的方法主要是控制音频或视频的播放状态，通过执行这些方法可以更方便地对视频或音频进行暂停、播放、重载和停止等操作。

方法描述play()开始播放音频或视频。如果媒体已经暂停或停止，这个方法会使媒体继续播放pause()暂停当前播放的音频或视频。如果媒体正在播放，调用此方法会暂停播放load()重新加载音频或视频元素。这主要用于在更改了src属性后重新加载媒体文件。canPlayType(type)静态方法，用于检查当前浏览器是否能够播放指定的媒体类型。type参数是一个MIME类型字符串，如'video/mp4;'addEventListener(event,listener[,options])为音频或视频元素添加指定事件类型的事件监听器removeEventListener(event,listener[,options])移除之前添加的事件监听器addTextTrack()向音频/视频添加新的文本轨道

进阶训练—制作“视频播放器”网页3下面通过案例8-10演示使用play（）和pause（）方法控制视频的播放状态，按下s键视频会播放，按下p键视频会暂停。

<videosrc="video/friday.mp4"width="320px"height="240px"controlsid="myVideo"></video><script>document.addEventListener('keydown',function(event){varvideo=document.getElementById('myVideo');if(event.key==='s'){video.play();console.log("视频已播放");}elseif(event.key==='p'){video.pause();console.log("视频已暂停");}});</script>

进阶训练—制作“视频播放器”网页3

audio/video对象的属性主要时设置或查看视频/音频的各项播放设定，包括播放速度、播放状态、音量等。

属性描述属性值或返回值src获取或设置音频/视频资源的URL字符串类型，例如"path/to/myMediaFile.mp4"currentSrc获取当前正在播放的音频/视频资源的URL字符串类型，实际加载的资源地址currentTime获取或设置音频/视频中的当前播放位置（以秒计）浮点数，表示秒数duration:获取当前音频/视频的总时长（如果可用）浮点数，表示秒数，不可设置paused检查音频/视频是否处于暂停状态布尔值，true表示暂停，false表示播放中ended检查音频/视频是否已播放完毕布尔值，true表示播放结束，false表示还在播放或未开