W3C HTML5标准阅读笔记 - video、audio

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element

HTML5中,video标签用于在网页中嵌入视频,而audio标签则用于在网页中嵌入音频。由于这两个标签是在HTML5标准中新加入的,因此在IE8等老的浏览器中并无支持;为了给老浏览器提供video/audio标签的备选方案,可以有以下两种做法:

  1. 在video/audio标签内部添加文本内容,提示用户更换浏览器后访问 -- 在不支持video/audio标签的浏览器中,这段文本内容会被显示出来;而在支持video/audio标签的浏览器中,这段文本内容则不会进行显示。
  2. 判断当前浏览器是否支持video/audio,如果不支持,则使用flash player等插件来实现音视频播放功能。

除了通用属性,这两个标签还拥有一系列的特有属性:

  • src。video标签的src属性意为嵌入视频的地址,而audio标签的src属性则为嵌入音频的地址。
  • crossorigin。crossorigin属性用于定义嵌入音视频的访问方式,其默认值为anonymous;当有需要时,可以将其值设定为use-credentials。
  • poster。仅video标签可用,用于设定视频播放前所显示的海报截图,其值为图片URL地址。
  • preload。设定播放前缓存多少音视频资源,其值有3个选项:none表示不缓存任何资源,metadata表示仅缓存视频宽高(video的情况下)、播放时长等元数据信息,auto则表示由浏览器决定缓存的数据量。标准规定当存在preload属性且其值为空字符串时,preload值为auto;而当preload属性不存在时,其默认值由浏览器自行决定。
  • autoplay。boolean属性,设定是否在加载video/audio标签后自动播放音视频。当autoplay属性与preload属性发生冲突时,以autoplay属性值为准 -- 音视频自动播放就必然意味着需要资源缓存。值得注意的是,在iOS的Safari浏览器中,为了防止打开页面后立即播放所导致的流量损失,autoplay这一属性是禁用的(链接)。
  • loop。boolean属性,设定是否循环播放。在iOS中,只有iOS5.0以后版本的Safari中,loop属性才有效。
  • muted。boolean属性,设定音视频是否默认静音。
  • controls。boolean属性,设定是否显示播放控制组件。
  • width/height。仅video标签可用,用于设定播放区域的大小。对于DOM中的video对象,其width/height属性与此标签属性相同,为具体播放显示区域的宽度/高度,而其videoWidth/videoHeight属性则为原始视频的宽度/高度。对于该播放区域的宽度和高度,当video标签存在width/height属性,或者在CSS样式表中对其宽高度有所定义时,采用这一开发人员定义的宽高度;当不存在显式定义,而video元素存在poster图片时,采用poster图片的宽度和高度;当既不存在显式定义,又不存在poster时,采用原始视频的宽度和高度;当既不存在显式定义,又不存在poster,也没有原始视频加载时,video元素的默认宽度为300像素,默认高度为150像素。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!