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

这篇具有很好参考价值的文章主要介绍了【html】Video元素的属性介绍和用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简言

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。
平常若涉及到视频内容,就会使用到它。

video

Video使用

  • 只有一个视频源

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

<video src="/video.mp4"></video>
  • 多个视频源。

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

<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 video</a> instead.
  </p>
</video>

  • 浏览器不支持该元素。 在不支持 video 元素的浏览器中,<video></video> 标签中间的内容会显示,作为降级处理。
<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />

  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>

video属性

常见的属性

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

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

其他属性

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对象。
currentTime double类型。 当前播放时间,单位为秒。为其赋值将会使媒体跳到一个新的时间。
defaultPlaybackRate double类型。控制媒体的播放速度。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 浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete OfflineAudioContext 渲染完成。
durationchange duration 属性的值改变时触发。
emptied 媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载它。
ended 视频停止播放,因为 media 已经到达结束点。
loadeddata media 中的首帧已经完成加载。
loadedmetadata 已加载元数据。
pause 播放已暂停。
play 播放已开始。
playing 由于缺乏数据而暂停或延迟后,播放准备开始。
progress 在浏览器加载资源时周期性触发。
ratechange 播放速率发生变化。
seeking 跳帧(seek)操作开始。
seeked 跳帧(seek)操作结束。
stalled 正在尝试获取媒体数据,但数据意外未出现。
suspend 媒体数据加载已暂停。
timeupdate currentTime 属性指定的时间发生变化。
volumechange 音量发生变化。
waiting 由于暂时缺少数据,播放已停止。

案例

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

结语

video元素的出现,使得网页文档可以播放音视频,弥补了本无法播放视频的缺陷,以前使用其他插件播放(例如flash)。
它也可以替代canvas,作为WebRTC数据的载体。文章来源地址https://www.toymoban.com/news/detail-802234.html

到了这里,关于【html】Video元素的属性介绍和用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(76)
  • HTML5中video元素事件详解(实时监测当前播放时间)

    video后边几个元素,可处理ios 系统的兼容性 事件 描述 loadstart 浏览器开始在网上寻找媒体数据 progress 浏览器正在获取媒体数据 suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束 abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的

    2024年02月08日
    浏览(62)
  • 【html】利用生成器函数和video元素,取出指定时间的视频画面

    有的时候想截取视频某一秒的视频画面。 手动截取操作麻烦,还得时刻关注视频播放时间。 于是,我搞出来了一个根据视频自动截取特定时间描述的页面。 获取视频对象 根据视频时长生成时间选择表单 根据表单选择的时间和视频地址,利用canvas和vido元素生成某一帧的视频

    2024年02月07日
    浏览(37)
  • HTML 元素的属性有哪些?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月14日
    浏览(42)
  • HTML 元素中的name 属性

    name 属性是 HTML 元素中常用的属性之一。它用于指定表单元素的名称,以便在提交表单时将其值与对应的键关联起来。 每个表单元素(例如 input 、 select 和 textarea )都可以具有一个 name 属性,该属性为元素提供一个唯一的标识符。当用户在提交表单时,浏览器会将表单元素的

    2024年02月13日
    浏览(41)
  • HTML元素和属性快速参考指南

    ​ 以下是几个与HTML元素和属性相关的参考资料网站链接: HTML Reference - 提供所有HTML元素和属性的免费指南。 W3Schools HTML Reference - W3Schools 提供一个广泛的HTML标签和属性参考。 freeCodeCamp HTML Cheat Sheet - freeCodeCamp 提供了一个HTML元素列表参考,适合初学者。 ​​​​​​​​

    2024年02月21日
    浏览(52)
  • HTML 元素的 class 和 id 属性有何区别?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(45)
  • 前端:常用的获取元素位置与元素尺寸的属性与方法

    属性/方法 描述 clientWidth 返回元素内容区的宽度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 clientHeight 返回元素内容区的高度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 offsetWidth 返回元素的总宽度,

    2024年04月13日
    浏览(74)
  • 【HTML 往日冒险 01】标签 元素 属性 注释 文本格式化 颜色 CSS

    说在前面 HTML 对于现在的我来说,熟悉又陌生,熟悉的是其标签的结构清晰,陌生的是其丰富的使用细节,长期不使用难免会失去许多相关的记忆,但是不妨让我们与W3school教程一同补全往日的冒险日志…(主要是从中提炼关键的信息,具体的知识点还是参考相关手册) 重新开

    2024年02月07日
    浏览(46)
  • 【温故而知新】HTML元素/属性/标题/注释/段落/文本格式/头部/主体

    HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它被用来描述网页的结构和内容,并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本,增加了许多新的元素和功能,以适应现代网页开发的需求。 HTML5 提供了许多新的元素和

    2024年01月16日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包