面向初步了解HTML的学习者 -- HTML5 video详解

时间:2022-11-02 12:31:10

第四篇内容主要涉及HTML5的<video>元素。 侧边目录可以快速导航

HTML <video> 元素

用于在HTML或者XHTML文档中嵌入视频内容。

使用上下文

描述
允许内容 流式内容, 包含任一src属性或是一个或多个<source>元素,其后紧跟流式内容或段落内容,不包括<video>或者<audio>元素。
标记省略 无,开始标签和结束标签都必须有
允许的父级元素 任何接受流式内容,或者段落内容的元素。

属性

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

  • autoplay

    布尔属性;指定后,视频会马上自动开始播放,不会停下来等着数据载入结束。

  • autobuffer

    布尔属性;指定后,视频会自动开始缓存,即使没有设置自动播放。该属性适用于视频被认为可能会播放(比如,用户导航到专门播放视频的页面,而不是那种嵌入视频还有其它内容的页面)。视频会一直缓存到媒体缓存满。

   ★: autobuffer 属性在稍晚的版本被去掉。规范定义了新的枚举属性,preload, 用不同的语法来取代autobuffer属性。

  • buffered

    这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。

  • controls

    加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

  • crossorigin

    该枚举属性指明抓取相关图片是否必须用到CORS(跨域资源共享)。 支持CORS的资源 可在 <canvas> 元素中被重用,而不会被污染。允许的值如下:

  • anonymous 跨域请求(即,使用 Origin: 的HTTP头)会被执行。但是不发送凭证(即,不发送cookie, X.509 证书或者 HTTP Basic 授权)。如果服务器不提供证书给源站点 (不设置Access-Control-Allow-Origin: HTTP头),图片会被 污染 并且它的使用会受限。
  • use-credentials 跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行,且凭证会被发送 (即, 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP头),图像会被 污染 且它的使用会受限。

   不加这个属性时,抓取资源不会走CORS请求(即,不会发送 Origin: HTTP 头),保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值,会被当作指定了枚举关键字 anonymous 一样使用。

  • height

    视频展示区域的高度,单位是CSS像素。

  • loop

    布尔属性;指定后,会在视频结尾的地方,自动返回视频开始的地方。

  • muted

    布尔属性,指明了视频里的音频的默认设置。设置后,音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放

  • played

    一个 TimeRanges 对象,指明了视频已经播放的所有范围。

  • preload

    该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一:

    1. none: 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;换句话说就是提示浏览器该视频不需要缓存。
    2. metadata:提示尽管作者认为用户不需要查看该视频,不过抓取元数据(比如:长度)还是很合理的。
    3. auto:用户需要这个视频优先加载;换句话说就是提示:如果需要的话,可以下载整个视频,即使用户并不一定会用它。 空字符串:也就代指 auto 值。

   假如不设置,默认值就是浏览器定义的了 (即,不同浏览器会选择自己的默认值),即使规范建议设置为 metadata。

  ★:
    autoplay属性优先于preload假如用户想自动播放视频,那么很明显浏览器需要下载视频。允许同时设置autoplay 和 preload属性。

    规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示

  • poster

    一个海报帧的URL,用于在用户播放或者跳帧之前展示。如果属性未指定,那么在第一帧可用之前什么都不会展示;之后第一帧就像海报帧一样展示。

  • src

    要嵌到页面的视频的URL。可选;你也可以使用vide块内的 <source> 元素来指定需要嵌到页面的视频。

  • width

    视频显示区域的宽度,单位是CSS像素。



时间偏移量目前是指定为float类型的值,表示偏移的秒数。
★: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。


一些接口

srcObject

HTMLMediaElement 接口的 srcObject 属性设定或返回一个对象,这个对象提供了一个与HTMLMediaElement关联的媒体源,这个对象通常是 MediaStream ,但根据规范可以是 MediaSource, Blob 或者 File。

语法

var mediaStream = HTMLMediaElement.srcObject
HTMLMediaElement.srcObject = mediaStream

   一个 MediaStream,MediaSource,Blob 或者 File 对象(具体支持请参见兼容表)。

其他的在后续遇到之后补充


如何在video中使用canvas

详情请戳