当前位置：首页 > news >正文

编程笔记 html5cssjs 031 HTML视频

news 2026/2/8 16:24:28

编程笔记 html5&css&js 031 HTML视频

一、`<video>`: 视频元素
二、属性
三、事件
四、嵌入视频页面
五、练习
小结

视频应用广泛，当前的互联网应用中，视频越来越重要，比如抖音、快手、腾讯视频等应用。

一、`<video>`: 视频元素

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
和元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

二、属性

类似于所有其他 HTML 元素，video 元素也支持全局属性。
autoplay
布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
备注：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的自动播放指南。如果使用 autoplay=“false” 来关闭视频的自动播放功能，会不起作用；只要 <video> 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。
controls
加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
controlslist 实验性非标准
当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。
允许的值有 nodownload、nofullscreen 和 noremoteplayback。
如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：
anonymous
在发送跨域请求时不携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部），图像会被污染，并且它的使用会受到限制。
use-credentials
在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 响应首部），图像会被污染，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin: HTTP 请求首部），保证其在元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。查看 CORS 设置属性 (en-US) 获取更多信息。
disablepictureinpicture 实验性
防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用
disableRemotePlayback 实验性
布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，你可以使用 x-webkit-airplay=“deny” 作为兜底方案。
height
视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。
loop
布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
muted
布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。
playsinline
布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
none: 表示不应该预加载视频。
metadata: 表示仅预先获取视频的元数据（例如长度）。
auto: 表示可以下载整个视频文件，即使用户不希望使用它。
空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。
备注： autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。
src
要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

三、事件

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

使用说明
浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
其他的使用注意事项：
如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。HTMLMediaElement 会激活许多不同的事件，以便于让你可以控制视频（和音频）内容。
你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

四、嵌入视频页面

还可以把其他视频网站的视频嵌入到网页。看下面练习中的例子，嵌入了腾讯视频的播放页面。

五、练习

<!DOCTYPE html>
<html lang="zh-cn"><title>编程笔记 html5&css&js HTML视频</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}.container {width: 500px; /* 设置容器的宽度 */margin: 0 auto; /* 将左右边距设置为自动 */line-height: 2;}</style><body><div class="container"><h1>视频：青少年成长管理 引言</h1><video width="320" height="240" controls="controls"><source src="mp4/00 青少年成长管理 引言 (1).mp4" type="video/mp4" /></video></div><div class="container"><h1>腾讯视频：斗破苍穹第4季</h1><p style="text-align: center"><!-- 下面的i0043frto05是视频ID --><iframeclass="video_iframe"style="z-index: 1"src="http://v.qq.com/iframe/player.html?vid=i0043frto05&amp;width=500&amp;height=375&amp;auto=0"allowfullscreen=""frameborder="0"height="375"width="500"></iframe></p></div></body>
</html>

小结

需要时再详细掌握。