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

HTML5 视频 Vedio 标签详解

news 2025/11/4 5:12:44

HTML5 引入了 <video> 标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。本文将全面介绍 <video> 标签的各种属性，并通过实例代码详细说明其用法。

一、基础用法

1. 基本结构

HTML5 中使用 <video> 标签嵌入视频文件，最简单的形式如下：

<video src="video-file.mp4" controls></video>

在这个示例中，src 属性指定视频文件的路径，controls 属性使浏览器显示视频控件。

2. 示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Video Example</title>
</head>
<body><h1>HTML5 Video Example</h1><video src="video-file.mp4" controls>Your browser does not support the video element.</video>
</body>
</html>

这段代码将在网页上显示一个视频播放器，如果浏览器不支持 <video> 标签，将显示替代文本 “Your browser does not support the video element.”。

二、属性详解

1. src

指定视频文件的 URL，可以是相对路径或绝对路径。

<video src="path/to/your-video-file.mp4" controls></video>

2. controls

显示视频控件（播放、暂停、音量、全屏等）。

<video src="video-file.mp4" controls></video>

3. autoplay

视频文件在页面加载完成后自动播放。需要注意的是，为了用户体验，很多浏览器默认禁止自动播放，特别是移动设备。

<video src="video-file.mp4" controls autoplay></video>

4. loop

视频文件播放结束后自动重新播放。

<video src="video-file.mp4" controls loop></video>

5. muted

初始加载时将视频设置为静音。

<video src="video-file.mp4" controls muted></video>

6. preload

提示浏览器在页面加载时如何处理视频文件。可能的值有：

  • none：不预加载视频文件。
  • metadata：只预加载视频文件的元数据。
  • auto：浏览器选择最佳方式预加载视频文件。
<video src="video-file.mp4" controls preload="auto"></video>

7. width 和 height

设置视频播放器的宽度和高度（以像素为单位）。

<video src="video-file.mp4" controls width="640" height="360"></video>

8. poster

在视频播放之前显示的预览图像（封面图）。

<video src="video-file.mp4" controls poster="poster-image.jpg"></video>

9. crossorigin

控制跨域资源共享 (CORS)，允许你配置是否可以加载跨域资源。

  • anonymous：不使用凭据。
  • use-credentials：使用凭据（如 Cookies）。
<video src="video-file.mp4" controls crossorigin="anonymous"></video>

三、支持多种视频格式

由于不同浏览器对视频格式的支持不同，通常需要提供多种格式的视频文件，以确保兼容性。可以使用多个 <source> 标签来定义不同格式的视频文件。

<video controls width="640" height="360" poster="poster-image.jpg"><source src="video-file.mp4" type="video/mp4"><source src="video-file.webm" type="video/webm"><source src="video-file.ogv" type="video/ogg">Your browser does not support the video element.
</video>

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Video Example with Multiple Formats</title>
</head>
<body><h1>HTML5 Video Example with Multiple Formats</h1><video controls width="640" height="360" poster="poster-image.jpg"><source src="video-file.mp4" type="video/mp4"><source src="video-file.webm" type="video/webm"><source src="video-file.ogv" type="video/ogg">Your browser does not support the video element.</video>
</body>
</html>

四、使用 JavaScript 控制视频

HTML5 提供了丰富的 JavaScript API，可以用来控制视频播放。以下是一些常用的属性和方法：

1. 常用属性

  • video.currentTime：获取或设置当前播放时间（秒）。
  • video.duration：获取视频总时长（秒）。
  • video.paused：返回视频是否暂停。
  • video.volume：获取或设置音量（0.0 到 1.0）。
  • video.playbackRate：获取或设置播放速度。

2. 常用方法

  • video.play()：播放视频。
  • video.pause()：暂停视频。
  • video.load()：重新加载视频文件。
  • video.requestFullscreen()：全屏播放视频（需要浏览器支持）。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Video Control with JavaScript</title>
</head>
<body><h1>Control HTML5 Video with JavaScript</h1><video id="myVideo" src="video-file.mp4" controls width="640" height="360"></video><br><button onclick="playVideo()">Play</button><button onclick="pauseVideo()">Pause</button><button onclick="stopVideo()">Stop</button><button onclick="muteVideo()">Mute/Unmute</button><script>var video = document.getElementById('myVideo');function playVideo() {video.play();}function pauseVideo() {video.pause();}function stopVideo() {video.pause();video.currentTime = 0; // Reset playback position to the start}function muteVideo() {video.muted = !video.muted; // Toggle mute}</script>
</body>
</html>

在这个示例中，我们通过 JavaScript 控制视频的播放、暂停、停止和静音。video.pause() 方法用于暂停视频，video.currentTime = 0 将播放位置重置到开始。

五、使用 <track> 标签添加字幕

HTML5 提供了 <track> 标签，可以用来为视频添加字幕、章节标题、描述等。以下是一个添加字幕的示例：

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Video with Subtitles</title>
</head>
<body><h1>HTML5 Video with Subtitles</h1><video controls width="640" height="360"><source src="video-file.mp4" type="video/mp4"><track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">Your browser does not support the video element.</video>
</body>
</html>

在这个示例中，<track> 标签用于加载字幕文件。kind="subtitles" 指定轨道类型为字幕，srclang 指定字幕语言，label 为字幕轨道提供标签。

字幕文件 (.vtt 格式) 示例：

WEBVTT1
00:00:00.000 --> 00:00:10.000
Hello, welcome to our video tutorial.2
00:00:10.000 --> 00:00:20.000
In this section, we will learn about HTML5 video.

相关文章：

HTML5 视频 Vedio 标签详解

HTML5 引入了 <video> 标签&#xff0c;允许开发者在网页中直接嵌入视频文件&#xff0c;而不需要依赖第三方插件。本文将全面介绍 <video> 标签的各种属性&#xff0c;并通过实例代码详细说明其用法。 一、基础用法 1. 基本结构 HTML5 中使用 <video> 标…...

编程日记 2024/6/8 2:09:32

三十五篇：数字化转型的引擎：赋能企业的ERP系统全景

数字化转型的引擎&#xff1a;赋能企业的ERP系统全景 1. 引言 在这个快速变化的数字时代&#xff0c;现代企业面临着前所未有的挑战和机遇。企业资源计划&#xff08;ERP&#xff09;系统&#xff0c;作为数字化转型的核心&#xff0c;扮演着至关重要的角色。它不仅是企业运营…...

编程日记 2024/6/8 2:08:31

利用ArcGIS对长江三角洲地区的gdp水平进行聚类

1、导入矢量图、数据 长三角地区矢量图 长三角地区矢量图对应数据 2、连接 3、设置属性将人均gdp数据导入 4、设置标注和图例 选择布局视图 5、聚类 2020年人均gdp地区聚类 6、2005~2020年各地区人均gdp可视化及聚类汇总 &#xff08;1&#xff09;2005~2020可视化 2005 …...

编程日记 2024/6/8 2:07:29

释放视频潜力：Topaz Video AI for mac/win 一款全新的视频增强与修复利器

在数字时代&#xff0c;视频已经成为我们记录生活、分享经历的重要方式。然而&#xff0c;有时候我们所拍摄的视频可能并不完美&#xff0c;可能存在模糊、噪点、抖动等问题。这时候&#xff0c;就需要一款强大的视频增强和修复工具来帮助我们提升视频质量&#xff0c;让它们更…...

编程日记 2024/6/8 2:06:28

MongoDB 正则表达式详解：高效数据查询与处理技巧

MongoDB 的正则表达式&#xff08;Regular Expression&#xff09;功能允许在查询中进行模式匹配和文本搜索&#xff0c;为用户提供了强大的灵活性。 基本语法 MongoDB 中使用正则表达式时&#xff0c;通常是在查询语句中使用 $regex 操作符。基本语法如下&#xff1a; { &l…...

编程日记 2024/6/8 2:05:27

第二十六章HTML与CSS书写规范

1.HTML书写规范 1.文档类型声明及编码 统一为html5 声明类型。编码统一为utf-8。 2.页面tdk TDK是一个缩写&#xff0c;其中“T”表示为网页定义标题&#xff0c;“D”表示为网页定义描述 description&#xff0c;“K”表示为搜索引擎定义关键词keywords。 1、<title&g…...

编程日记 2024/6/8 2:04:26

基于FPGA的AD5753（DAC数模转换器）的控制 II（SPI驱动）

基于FPGA的AD5753&#xff08;DAC数模转换器&#xff09;的控制 II&#xff08;已上板验证&#xff09; 语言 &#xff1a;Verilg HDL EDA工具&#xff1a;Vivado 基于FPGA的AD5753&#xff08;DAC数模转换器&#xff09;的控制 II&#xff08;已上板验证&#xff09;一、引言二…...

编程日记 2024/6/8 2:03:25

【全开源】Java同城服务同城信息同城任务发布平台小程序APP公众号源码

&#x1f4e2; 连接你我&#xff0c;让任务触手可及 &#x1f31f; 引言 在快节奏的现代生活中&#xff0c;我们时常需要寻找一些便捷的方式来处理生活中的琐事。同城任务发布平台系统应运而生&#xff0c;它为我们提供了一个高效、便捷的平台&#xff0c;让我们能够轻松发布…...

编程日记 2024/6/8 2:02:24

[Redis]List类型

列表类型来存储多个有序的字符串&#xff0c;a、b、c、d、e 五个元素从左到右组成了一个有序的列表&#xff0c;列表中的每个字符串称为元素&#xff0c;一个列表最多可以存储个元素。在 Redis 中&#xff0c;可以对列表两端插入&#xff08;push&#xff09;和弹出&#xff08…...

编程日记 2024/6/8 2:01:21

export 和 export default 的区别

在 JavaScript 中&#xff0c;export 和 export default 都是用于导出模块中的内容的关键字&#xff0c;但它们有一些区别&#xff1a; export: export 关键字用于导出多个变量、函数或对象。可以一次导出多个内容&#xff0c;并且在导入时需要使用对应的名称。例如&#xff1a…...

编程日记 2024/6/8 1:59:19

29网课交单平台 epay.php SQL注入漏洞复现

0x01 产品简介 29网课交单平台是一个专注于在线教育和知识付费领域的交单平台。该平台基于PHP开发，通过全开源修复和优化，为用户提供了高效、稳定、安全的在线学习和交易环境。作为知识付费系统的重要组成部分，充分利用了互联网的优势，为用户提供了便捷的支付方式、高效的…...

编程日记 2024/6/8 1:56:15

推荐ChatGPT4.0——Code Copilot辅助编程、Diagrams: Show Me绘制UML图、上传PDF并阅读分析

5月14日凌晨1点、太平洋时间的上午 10 点&#xff0c;OpenAI的GPT-4o的横空出世&#xff0c;再次巩固了其作为行业颠覆者的地位。GPT-4o的发布不仅仅是一个产品的揭晓&#xff0c;它更像是向世界宣告AI技术已迈入了一个全新的纪元&#xff0c;连OpenAI的领航者萨姆奥特曼也不禁…...

编程日记 2024/6/8 1:55:15

rollup.js（入门篇）

前沿 Rollup 是一个用于 JavaScript 的模块打包工具&#xff0c;它将小的代码片段编译成更大、更复杂的代码&#xff0c;例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式&#xff0c;而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许…...

编程日记 2024/6/8 1:54:14

【Spring Cloud Alibaba】开源组件Sentinel

目录 什么是Sentinel发展历史与Hystrix的异同 Sentinel可以做什么&#xff1f;Sentinel的功能Sentinel的开源生态Sentinel的用户安装Sentinel控制台预备环境准备Sentinel 分为两个部分:下载地址 项目集成Sentinel创建项目修改依赖信息添加启动注解添加配置信息在控制器类中新增…...

编程日记 2024/6/8 1:52:11

Android14 WMS-窗口绘制之relayoutWindow流程(一)-Client端

Android14 WMS-窗口添加流程(一)-Client端-CSDN博客 Android14 WMS-窗口添加流程(二)-Server端-CSDN博客 经过上述两个流程后&#xff0c;窗口的信息都已经传入了WMS端。 1. ViewRootImpl#setView 在窗口添加流程(一)中&#xff0c;有这个方法&#xff1a; http://aospxref…...

编程日记 2024/6/8 1:51:10

JVM学习-Jprofiler

JProfiler 基本概述 特点 使用方便&#xff0c;界面操作友好对被分析的应用影响小(提供模板)CPU&#xff0c;Tread&#xff0c;Memory分析功能尤其强大支持对jdbc,noSql,jsp,servlet,socket进行分析支持多种模式(离线、在线)的分析支持监控本地、远程JVM跨平台&#xff0c;拥…...

编程日记 2024/6/8 1:50:09

Skins

本主题解释如何将DevExpress主题/皮肤应用到应用程序中&#xff0c;如何允许用户在运行时在主题之间切换&#xff0c;如何自定义现有皮肤或创建自己的皮肤&#xff0c;等等。 WinForms订阅包括许多基本控件&#xff1a;按钮、复选框、表单、消息框、对话框、对话框等。 我们实现…...

编程日记 2024/6/8 1:49:08

【Meetup】探索Apache SeaTunnel的二次开发与实战案例

在数据科技快速演进的今天&#xff0c;业务场景的复杂化和数据量的激增&#xff0c;推动了大数据技术的迅速发展&#xff0c;在众多开源大数据处理工具中&#xff0c;Apache SeaTunnel以其强大的数据集成能力&#xff0c;成为众多企业的首选。 但随着应用深入&#xff0c;企业面…...

编程日记 2024/6/8 1:47:06

嵌入式Linux系统中RTC应用的操作详解

第一：RTC的作用以及时间简介 “RTC”的英文全称是Reul-Time Clock，翻译过来是实时时钟芯片．实时时钟芯片是日常生活中应用最为广泛的电子器件之一，它为人们或者电子系统提供精确的实时时间，实时时钟芯片通过引脚对外提供时间读写接口，通常内部带有电池，保证在外部系统关…...

编程日记 2024/6/8 1:44:04

Edge 工作区是什么？它都有哪些作用？

什么是工作区 Edge 工作区是什么&#xff1f;它是微软 Edge 浏览器中的一个功能&#xff0c;在帮助用户更好地组织和管理他们的浏览会话。通过工作区&#xff0c;用户可以创建多个独立的浏览环境&#xff0c;每个工作区内包含一组相关的标签页和浏览器设置。这使得用户能够根据…...

编程日记 2024/6/8 1:43:03

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/11/2 21:40:10

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/10/22 12:48:44

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/9/27 18:25:59

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/1 2:18:30

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/2 8:56:14

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/11/3 0:39:14

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14