9.HTML多媒体对象标签元素介绍

[TOC]

0x00 前言简述描述: 本章节主要讲解音视频多媒体标签元素的使用示例，帮助各位学习者快速入门HTML标签。

Audio/Video 元素一览

New : 定义media元素 (

video 标签描述: 该元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将

属性:

src: 要嵌到页面的视频的 URL。controls: 提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。controlslist: 择在控制面板上显示哪些控件, 允许接受的值有 nodownload, nofullscreen 和 noremoteplaybackheight: 视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。width: 视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。muted: 布尔属性，指明在视频中音频的默认设置为开启。loop: 循环播放。autoplay: 自动播放，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。autopictureinpicture: 如果为 true，那么当用户在当前页面和另一个页面或应用程序之间来回切换时，会自动切换画中画（picture-in-picture）模式。poster: 海报帧图片 URL，用于在视频处于下载中的状态时显示。playsinline: 布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。disablepictureinpicture: 防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。disableRemotePlayback: 布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。crossorigin : 该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频.preload : 该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。 none: 表示不应该预加载视频。

metadata: 表示仅预先获取视频的元数据（例如长度）。

auto: 表示可以下载整个视频文件，即使用户不希望使用它。

空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。

事件:

audioprocess (en-US)已弃用 : The input buffer of a ScriptProcessorNode is ready to be processed.

canplay : 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。

canplaythrough : 浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。

complete : OfflineAudioContext 渲染完成。

durationchange : duration 属性的值改变时触发。

emptied (en-US) : 媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。

ended 视频停止播放，因为 media 已经到达结束点。

loadeddata : media 中的首帧已经完成加载。

loadedmetadata : 已加载元数据。

pause : 播放已暂停。

play : 播放已开始。

playing : 由于缺乏数据而暂停或延迟后，播放准备开始。

progress : 在浏览器加载资源时周期性触发。

ratechange (en-US) : 播放速率发生变化。

seeked (en-US) : 跳帧（seek）操作完成。

seeking (en-US) : 跳帧（seek）操作开始。

stalled (en-US) : 用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。

suspend (en-US) : 媒体数据加载已暂停。

timeupdate : currentTime 属性指定的时间发生变化。

volumechange (en-US) : 音量发生变化。

waiting (en-US) : 由于暂时缺少数据，播放已停止。

示例:

代码语言：javascript代码运行次数：0运行复制

抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 下载

并用你喜欢的播放器观看！

Sorry, your browser does not support embedded videos, Download the

WEBM

or

MP4

video.

温馨提示: 如果视频的 MIME 类型设置不正确，视频可能不会显示，或者显示包含一个 X 的灰色盒子（如果启用了 JavaScript 的话）。

track 标签描述: HTML 元素 被当作媒体元素—

属性:

src : track 的地址,必须是合法的 URL。srclang : track 文本数据的语言。label : 当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。default : 该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。kind : 定义了 text track 应该如何使用, 默认值为 subtitles，其他值为captions、descriptions、chapters、metadata。 subtitles : 字幕给观影者看不懂的内容提供了翻译。

captions : 隐藏式字幕提供了音频的转录甚至是翻译。

descriptions : 视频内容的文本描述。

chapters : 章节标题用于用户浏览媒体资源的时候。

示例:

代码语言：javascript代码运行次数：0运行复制

kind="captions"

srclang="en"

src="/media/examples/friday.vtt">

Download the

MP4

video, and

subtitles.

# 指定了字幕语言

src="sampleDescriptions.vtt" srclang="en">

...

WeiyiGeek.track标签执行结果图

扩展说明: friday.vtt 文件内容如下，包含时间与对应时刻的字幕。

代码语言：javascript代码运行次数：0运行复制WEBVTT

00:00:00.000 --> 00:00:00.999 line:80%

Hildy!

00:00:01.000 --> 00:00:01.499 line:80%

How are you?

00:00:01.500 --> 00:00:02.999 line:80%

Tell me, is the lord of the universe in?

00:00:03.000 --> 00:00:04.299 line:80%

Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%

Somebody must've stolen the crown jewels0x02 Object对象标签元素一览embed 标签描述: 该元素将外部内容嵌入文档中的指定位置，此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。

属性:

height : 资源显示的高度.width : 资源显示的宽度.src : 被嵌套的资源的 URL。type : 用于选择插件实例化的 MIME 类型。示例:

代码语言：javascript代码运行次数：0运行复制object 标签描述: 该元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素，不过由于漏洞以及缺乏浏览器支持，这一点并未实现，浏览器的对象支持有赖于对象类型不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。而幸运的是，object 对象提供了解决方案，如果未显示 object 元素，就会执行位于 之间的代码。

属性:

name : 浏览上下文名称（HTML5），或者控件名称（HTML 4）。form : 对象元素关联的 form 元素（属于的 form）, 取值必须是同一文档下的一个

元素的 ID。width : 资源显示的宽度，单位是 CSS 像素。height : 资源显示的高度，单位是 CSS 像素。usemap : 指向一个