HTML5-多媒体标签

多媒体标签

audio标签

概念:在页面中插入音频，不同的浏览器对音频格式的支持不一样

语法:

常用属性

• src ：音频文件的来源

• controls： 是否显示控制面板，默认不显示

• autoplay： 是否自动播放，默认不自动播放

• loop ：是否循环播放

• muted ：是否静音

• preload ：是否预加载

  • none：不预加载

  • auto： 默认值，预加载

  • metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等)

实例

运行结果

视频格式

对于HTML5音频格式中，主要有3种格式

• MP3

• WAV

• OGG

主流浏览器对音频的支持

格式	Chrome	Edge	Firefox	Safari	Opera
MP3	√	√	√	√	√
OGG	√	√	√		√
WAV	√	√	√	√	√

source元素

概念:如果想要音频在所有主流浏览器中成功播放，还得做兼容处理。

在HTML5中，可以使用source元素来实现多种格式的音频播放

语法:

实例：

运行结果

video标签

概念:在页面中插入视频，不同的浏览器对视频格式的支持不一样

语法:

常用属性

• width/height ：视频播放器的尺寸

• poster ：在视频加载前显示的图片

• controls：是否显示控件

• loop：是否循环播放

• preload：是否预加载

  • auto：默认值，预加载

  • metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等）

  • none：不预加载

如果浏览器不支持video元素，就会显示标签中的内容“你的浏览器不支持video标签，请升级到最新版本”。这个提示文字可加可不加.

实例:

运行结果:

视频格式

对于HTML5，主要有3种视频格式

• mp4

• ogg

• webm

主流浏览器对视频格式的支持程度

格式	Chrome	Edge	Firefox	Safari	Opera
mp4	√	√	√	√	√
ogg	√	√	√		√
webm	√	√	√	√	√

source元素

概念:由于不同的浏览器对HTML5的视频格式各不相同，为满足需求，可能需要为视频文件提供多种不同的解码器，所以HTML5提供了一个新的元素source元素

语法:

属性

• src：视频源的URL

• type：视频源的播放类型

• media：指定视频源所匹配的源码器信息

实例:

运行结果

embed标签

概念:

多媒体文件是文本、图像、声音、动画、视频等媒体元素的统称。embed元素可以插入多种格式的多媒体文件，常见的格式有JPG、WMV、WAV、AIFF、MP3等。

语法:

说明

常用属性

• src：文件来源

• width：文件宽度

• height：文件高度

• type：可省略，文件类型

所有的type类型：Media Types

实例

运行结果

object标签

概念:

object元素可以定义一个嵌入的对象。可以使用object向页面中添加文件。

object支持多种不同媒介类型，如图像、声音、动画、视频等。使用时必须要指定data和type属性。

语法:

实例

运行结果

音频与视频相关的属性

HTML5的常用音频/视频属性及描述如下所示，属性用于设置或返回播放的特性。

HTML5的常用音频/视频属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频或视频
controls	设置或返回音频/视频是否显示默认控制条（比如播放/暂停等）
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
duration	返回当前音频/视频的长度（以秒计）
loop	设置或返回音频/视频是否应在结束时重新播放
muted	设置或返回音频/视频是否静音
paused	设置或返回音频/视频是否暂停
readyState	返回音频/视频当前的就绪状态
src	设置或返回audio/video元素的当前来源
poster	设置或返回video元素的封面图片的地址
volume	设置或返回音频/视频的音量

HTML5的常用音频/视频方法

HTML5的音频/视频方法用于实现音频/视频的某些功能，如音频/视频的加载，播放，暂停播放等。

HTML5的常用音频/视频方法及描述

方法	描述
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频
play()	开始播放音频/视频
pause()	暂停播放当前的音频/视频

HTML5的常用音频/视频事件

HTML5中的某个音频/视频事件是在满足某些条件的情况下触发的。如 error 事件是在加载错误期间出现错误时触发的，加载出错时要做什么处理，就把出错程序写在这个事件中。

HTML5的常用音频/视频事件及描述

事件	描述
ended	目前的播放列表已结束时触发
error	音频/视频加载期间发生错误时触发
pause	音频/视频已暂停播放时触发
play	音频/视频已开始播放或不再暂停播放时触发
volumechange	音量已更改时触发
progress	浏览器正在下载音频/视频时触发