HTML初学者教程：多媒体标签视频、音频...

除了图片之外，网站还可以托管视频和音频。

标签是用于定位视频的块级元素。如果浏览器支持加载的视频格式，则会显示播放器，否则会显示内部的子元素。

<video  controls>
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

如果上述代码中的浏览器不支持该格式的视频，中会出现文字提示。

具有以下属性。

• src：视频文件的URL。
• controls：播放器是否显示控制面板。该属性是布尔属性，不需要赋值。如果写了属性的名字，就表示是开放的。如果您不想使用浏览器的默认播放器，而是想使用自定义播放器，请不要使用此属性。
• width：视频播放器的宽度（以像素为单位）。
• height：视频播放器的高度（以像素为单位）。
• 自动播放：视频是否自动播放。该属性是一个布尔属性。
• loop：视频是否循环播放。该属性是一个布尔属性。
• muted：默认是否静音，该属性为布尔属性。
• 海报：视频播放器封面图片 URL。
• prefetch：播放视频前是否缓冲视频文件。仅当未设置 autoplay 时，此属性才适用。它有三个值，分别是 none （不缓存）、 metadata （仅缓存整个视频文件元数据）、 auto 。
• 串联播放：iPhone 上的 Safari 浏览器播放视频时，会自动切换到全屏。该属性可以禁用此行为。该属性是布尔属性。
• crossorigin：是否加载跨域视频。它可以采用两个值，即 anonymous（跨域请求不发送用户凭据，尤其是 cookie），using凭据（跨域请求发送用户凭据） 。
• 当前时间：指定当前播放位置（双精度浮点数，单位为秒）。如果尚未开始播放，则将从该属性指定的位置开始播放。
• duration：该属性是只读的，表示时间轴上播放的持续时间（总长度）。该值为双精度浮点数（以秒为单位）。如果是流媒体，结束时间未知，属性值为+Infinity。

这是一个例子。

<video width="400" height="400"
       autoplay loop muted
       poster="poster.png">
</video>

上面的代码中，视频播放器的大小是400x400，它会自动播放和重复，静音，并有封面图片。这是在网站主页上编写背景视频的常见方法。

HTML 标准没有指定浏览器必须支持哪些视频格式。这完全取决于浏览器制造商自己。为了避免浏览器不支持视频格式，您可以使用 标签来放置同一视频的多种格式。

<video controls>
  <source  type="video/mp4">
  <source  type="video/webm">
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

上述代码中，标签的属性type的值为视频文件的MIME类型。上面的示例指定了两种视频文件格式：MP4 和 WebM。如果浏览器支持 MP4，则视频将以 MP4 格式加载，并且不会执行进一步的执行。如果不支持 MP4，请检查是否支持 WebM。如果仍然不支持，则会出现提示。

标签是用于放置音频的块级元素。它的使用本质上与标签相同。

<audio controls>
  <source  type="audio/mp3">
  <source  type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p>
</audio>

上面代码中，标签内部使用了gg标签来指定两种音频格式：优先使用MP3，浏览器不支持。格式。如果浏览器无法播放音频，则会显示下载链接。

的属性与 的属性类似，请参阅上一节。

• autoplay：是否自动播放，布尔属性。
• 控件：是否显示播放工具栏，布尔属性。如果不设置，浏览器将不会显示播放界面，通常用于背景音乐。
• crossorigin：是否使用跨域请求。
• cycle：是否循环，布尔属性。
• muted：是否静音，布尔属性。
• 预加载：音频文件的缓冲区设置。
• src：音频文件的 URL。标签

用于指定视频字幕。格式为 WebVTT（文件 .vtt），位于内部标签 中。它是一个没有结束标记的单个标记。

<video controls >
   <track label="英文" kind="subtitles"  srclang="en">
   <track label="中文" kind="subtitles"  srclang="cn" default>
</video>

上面的代码指定了视频文件的英文字幕和中文字幕。标签

具有以下属性。

• label：播放器显示的字幕名称，供用户选择。
• type：字幕类型。默认值为subtitles，表示将原始音频翻译成外文。例如，英文视频提供中文字幕。另一个常见值是字幕，它表示原始音频的文本描述，通常采用视频的原始语言。例如，英文视频有英文字幕。
• src：vtt字幕文件的URL。
• srclang：字幕语言必须是有效的语言代码。
• default：是否默认打开，布尔属性。

用于 、❙‼dio‼ 内部。用于指定外部源。各个标签单独使用，无需关闭标签。

具有以下属性，具体示例可以在相应的容器标签中找到。

• type：指定外部资源的MIME类型。
• src：指定 和 的源文件。
• srcset：指定在不同条件下加载的图像文件。
• media：指定 的媒体查询表达式。
• size：指定不同设备的显示尺寸，用于，必须与srcset标签

配合使用 用于嵌入外部内容。这些外部内容通常由浏览器插件管理。由于默认浏览器插件不一致，有可能并非所有浏览器用户都能访问到这部分内容，建议谨慎使用。

下面是嵌入视频播放器的示例。

<embed type="video/webm"
       
       width="250"
       height="200">

上述代码中嵌入的视频将由浏览器插件控制。如果您的浏览器没有安装 MP4 插件，则视频将无法播放。

标签具有以下常规属性。

• height：显示高度，单位为像素，不允许百分比。
• width：显示宽度，单位为像素，不允许百分比。
• src：嵌入资源的 URL。
• type：嵌入资源的 MIME 类型。

浏览器通过type属性获取嵌入资源的MIME类型。插件注册类型后，插件开始处理嵌入资源。

以下是播放MOV视频文件的QuickTime插件示例。

<embed type="video/quicktime"  width="640" height="480">

以下是激活Flash插件的示例。

<embed  quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

如果浏览器没有安装 Flash 插件，以上代码会提示您从 pluginspage 属性中指定的 URL 下载该插件。

、

标签与类似，它们也插入外部资源并由浏览器插件处理。它可以被认为是 的替代品。它具有标准化的行为，仅限于嵌入一些公共资源，并且没有历史问题，因此建议更多。

以下是插入PDF文件的示例。

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

上述代码中，如果浏览器安装了PDF插件，则网页上会出现PDF查看窗口。

具有以下一般属性。

• data：嵌入资源的 URL。
• form：当前网页上关联表单的id属性（如果有）。
• 高度：无法使用以像素和百分比为单位的资源显示高度。
• width：无法使用以像素和百分比为单位的资源显示宽度。
• type：资源的 MIME 类型。
• typemustmatch：布尔属性，指示属性data 和属性type 是否必须匹配

以下是插入Flash视频的示例。

<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

标签是一个容器元素， 标签可在内部使用以提供插件所需的运行时参数。

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>