HTML5新增video和audio标签

video

概念

HTML 元素 用于在 HTML 或者 XHTML(可扩展超文本标记语言) 文档中嵌入媒体播放器,用于支持文档内的视频播放。

也可以将 标签用于音频内容,但是 元素可能在用户体验上更合适。

注意:在不支持 video 元素的浏览器中, 标签中间的内容会显示,作为降级处理。

属性

类似于所有其他 HTML 元素,video 元素也支持 全局属性。

src

要嵌到页面的视频的 URL。

也可以使用 video 块内的 元素来指定需要嵌到页面的视频。

语法:

height

视频显示区域的高度,单位是 px。

注意:只支持绝对值,不支持百分比(%)。

语法:

width

视频显示区域的高度,单位是 px。

注意:只支持绝对值,不支持百分比(%)。

语法:

autoplay

自动播放。

语法:

注意:在某些浏览器中(如:Chrome),需要设置 muted 属性(静音)自动播放才生效。

controls

在视频底部提供一个控制面板,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

语法:

loop

在视频播放结束的时候,自动返回视频开始的地方,继续播放。(循环播放)

语法:

muted

初始化为静音播放。(不设置默认有声音)

语法:

poster

海报帧图片 URL,用于在视频处于下载中的状态时显示。

如果未指定该属性,则在视频第一帧可用之前不会显示任何内容,然后将视频的第一帧会作为海报帧来显示。

语法:

preload

该枚举属性旨在提示浏览器,作者认为在播放视频之前,加载哪些内容会达到最佳的用户体验。可能是下列值之一:

  • none:表示不应该预加载视频。
  • metadata:表示仅预先获取视频的元数据(例如长度)。
  • auto:表示可以下载整个视频文件,即使用户不希望使用它。
  • “”:和值为 auto 一致。每个浏览器的默认值都不相同,即使规范建议设置为 metadata

注意:autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性,浏览器显然需要开始下载视频以便回放。

语法:

crossorigin

该枚举属性指明是否使用 CORS(跨域资源共享)来获取相关视频。允许 CORS 的资源 可在 元素中被重用,而不会被污染。允许的值如下:

  • anonymous:在发送跨域请求时不携带凭证(credential)信息。

    浏览器在发送 HTTP 请求时,请求头不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。

  • use-credentials:在发送跨域请求时携带凭证(credential)信息。

    浏览器在发送 HTTP 请求时,请求头携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。

不加 crossorigin 属性时,获取资源不会使用 CORS 请求,保证其在 元素中使用时不会被污染。

如果指定非法值,会被当作指定了枚举关键字 anonymous 一样使用。

语法:

事件

  • canplay:不需要缓存全部的视频内容,直接开始播放。
  • canplaythrough:需要缓存全部的视频内容,才开始播放。
  • complete:OfflineAudioContext 渲染完成。
  • durationchange:duration 属性的值改变时触发。
  • emptied:媒体内容变为空。
  • ended:视频停止播放,因为 media 已经到达结束点。
  • loadeddata:media 中的首帧已经完成加载。
  • loadedmetadata:已加载元数据。
  • play:播放已开始。
  • pause:播放已暂停。
  • playing:由于缺乏数据而暂停或延迟后,播放准备开始。
  • progress:在浏览器加载资源时周期性触发。
  • ratechange:播放速率发生变化。
  • seeking:跳帧操作开始。
  • seeked:跳帧操作完成。
  • stalled:用户代理正在尝试获取媒体数据,但数据意外未出现。
  • suspend:媒体数据加载已暂停。
  • timeupdate:currentTime 属性指定的时间发生变化。
  • volumechange:音量发生变化。
  • waiting:由于暂时缺少数据,播放已停止。

示例

不同浏览器所支持的视频格式各不相同,但 mp4 格式是几乎所有浏览器都支持的,所以尽量使用 mp4 格式的视频。(可以通过在 元素里提供多个视频源,然后浏览器将会使用它所支持的第一个源)

浏览器 MP4 WebM Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES
<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="myVideo.mp4">link to the videoa> instead.p>
video>

audio

概念

HTML 元素用于在文档中嵌入音频内容。

元素可以包含一个或多个音频资源,这些音频资源可以使用 src 属性或者 元素来进行描述:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

属性

该元素包含 全局属性。

src

要嵌到页面的视频的 URL。

也可以使用 audio块内的 元素来指定需要嵌到页面的视频。

语法:

autoplay

自动播放。

语法:

controls

提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。

语法:

loop

在视频播放结束的时候,自动返回视频开始的地方,继续播放。(循环播放)

语法:

muted

初始化为静音播放。(不设置默认有声音)

语法:

poster

海报帧图片 URL,用于在视频处于下载中的状态时显示。

如果未指定该属性,则在视频第一帧可用之前不会显示任何内容,然后将视频的第一帧会作为海报帧来显示。

语法:

preload

该枚举属性旨在提示浏览器,作者认为在播放视频之前,加载哪些内容会达到最佳的用户体验。可能是下列值之一:

  • none:表示不应该预加载视频。
  • metadata:表示仅预先获取视频的元数据(例如长度)。
  • auto:表示可以下载整个视频文件,即使用户不希望使用它。
  • “”:和值为 auto 一致。每个浏览器的默认值都不相同,即使规范建议设置为 metadata

注意:autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性,浏览器显然需要开始下载视频以便回放。

语法:

currentTime(只读)

当前播放的位置(单位为秒)。

duration(只读)

音频在时间轴中的持续时间(总长度),以秒为单位。

crossorigin

该枚举属性指明是否使用 CORS(跨域资源共享)来获取相关视频。允许 CORS 的资源 可在 元素中被重用,而不会被污染。允许的值如下:

  • anonymous:在发送跨域请求时不携带凭证(credential)信息。

    浏览器在发送 HTTP 请求时,请求头不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。

  • use-credentials:在发送跨域请求时携带凭证(credential)信息。

    浏览器在发送 HTTP 请求时,请求头携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。

不加 crossorigin 属性时,获取资源不会使用 CORS 请求,保证其在 元素中使用时不会被污染。

如果指定非法值,会被当作指定了枚举关键字 anonymous 一样使用。

语法:

事件

  • audioprocess:一个 ScriptProcessorNode 的输入缓冲区已经准备开始处理。
  • canplay:不需要缓存全部的视频内容,直接开始播放。
  • canplaythrough:需要缓存全部的视频内容,才开始播放。
  • complete:OfflineAudioContext 渲染完成。
  • durationchange:duration 属性的值改变时触发。
  • emptied:媒体内容变为空。
  • ended:视频停止播放,因为 media 已经到达结束点。
  • loadeddata:media 中的首帧已经完成加载。
  • loadedmetadata:已加载元数据。
  • play:播放已开始。
  • pause:播放已暂停。
  • playing:由于缺乏数据而暂停或延迟后,播放准备开始。
  • progress:在浏览器加载资源时周期性触发。
  • ratechange:播放速率发生变化。
  • seeking:跳帧操作开始。
  • seeked:跳帧操作完成。
  • stalled:用户代理正在尝试获取媒体数据,但数据意外未出现。
  • suspend:媒体数据加载已暂停。
  • timeupdate:currentTime 属性指定的时间发生变化。
  • volumechange:音量发生变化。
  • waiting:由于暂时缺少数据,播放已停止。

示例

浏览器对 文件类型音频编码 的支持各有不同,你可以使用内嵌的 元素提供不同的播放源。浏览器会使用第一个它支持的播放源:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audioa> instead.p>
audio>

你可能感兴趣的:(HTML,html5,html,前端)