前端 【html】Video元素的属性介绍和用法

简言

HTML

video

Video使用

只有一个视频源

只有一个视频的话，在\video元素中的src属性填入即可。

多个视频源。

多个视频源，需要搭配source元素指定视频源，然后浏览器将会使用它所支持的第一个源。

Your browser doesn't support HTML5 video. Here is a

link to the video instead.

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

Download the

WEBM

or

MP4

video.

video属性

常见的属性

这些属性是可以写在元素身上的属性。

属性描述autoplay布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。controls加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。crossorigin该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 元素中被重用，而不会被污染。允许的值如下：anonymous（跨域请求不验证）、use-credentials（跨域请求携带验证信息）height视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）width视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。loop布尔属性；循环播放。指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。muted布尔属性，指明在视频中音频的默认设置。 是否静音，默认false,即不静音playsinline布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内. 请注意，没有此属性并不意味着视频始终是全屏播放的。poster海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。preload该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：none: 表示不应该预加载视频。metadata: 表示仅预先获取视频的元数据（例如长度）。auto: 表示可以下载整个视频文件，即使用户不希望使用它。空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。src要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 元素来指定需要嵌到页面的视频。

其他属性

video元素的Dom对象是HTMLVideoElement类型。 HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了HTMLMediaElement 和 HTMLElement 的属性与方法。

属性描述videoHeight只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。videoWidth只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际宽度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。buffered只读属性。 buffered属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个TimeRanges对象。currentTimedouble类型。 当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。defaultPlaybackRatedouble类型。控制媒体的播放速度。1.0 表示正常的播放速度，如果值小于 1.0，则播放速度会比”正常速度“慢，如果值大于 1.0，则播放速度会比”正常速度“快。0.0 是一个无效的值，并且会抛出 NOT_SUPPORTED_ERR 错误。duration只读double类型。媒体以秒为单位的总长度时间，如果媒体不可用，则为 0. 如果媒体可用，但时间长度未知，值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度，则值为 Inf。ended只读属性。表示媒体是否已经播放完毕。paused只读属性。 指示媒体元素是否被暂停。playbackRate当前媒体播放的速度。该值用于实现快进、慢动作等用户控制。正常播放速度乘以该值即可得到当前速度，因此 1.0 表示正常速度。如果 playbackRate 为负值，则媒体将向后播放。played只读属性。 媒体可被播放的范围。 TimeRanges对象。readyState媒体的准备状态。具体可查看volume表示音频的音量。值从 0.0（静音）到 1.0（最大音量）。

video方法

video方法也是继承了HTMLMediaElement 和 HTMLElement 的方法。

方法作用canPlayType(in DOMString type)确定是否可以播放指定的媒体类型。 返回 ‘probably’（可以）、‘maybe’（可能可以）和空字符串（不行）。fastSeek(double time)跳到指定时间load()重置媒体元素并重新开始选择媒体资源。任何待处理的事件都会被丢弃。获取多少媒体数据仍受 preload 属性的影响。在删除任何 src 属性和源元素后代后，此方法可用于释放资源。否则，除非需要在动态变化后重新扫描源元素子元素，否则通常不需要使用此方法。pause()暂停播放play()开始播放

video事件

video事件大部分是从HTMLMediaElement继承的。

事件触发时机canplay浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。canplaythrough浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。completeOfflineAudioContext 渲染完成。durationchangeduration 属性的值改变时触发。emptied媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。ended视频停止播放，因为 media 已经到达结束点。loadeddatamedia 中的首帧已经完成加载。loadedmetadata已加载元数据。pause播放已暂停。play播放已开始。playing由于缺乏数据而暂停或延迟后，播放准备开始。progress在浏览器加载资源时周期性触发。ratechange播放速率发生变化。seeking跳帧（seek）操作开始。seeked跳帧（seek）操作结束。stalled正在尝试获取媒体数据，但数据意外未出现。suspend媒体数据加载已暂停。timeupdatecurrentTime 属性指定的时间发生变化。volumechange音量发生变化。waiting由于暂时缺少数据，播放已停止。

案例

这个我写的视频画面截取网页

结语

video元素的出现，使得网页文档可以播放音视频，弥补了本无法播放视频的缺陷，以前使用其他插件播放（例如flash）。 它也可以替代canvas，作为WebRTC数据的载体。

好文推荐

 您阅读本篇文章共花了：