HTML5 视频 Vedio 标签详解

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. widthheight

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

<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.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/19876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

达梦数据库修改兼容模式设置

达梦数据库兼容模式设置及服务管理操作手册 1. 查询兼容模式 在达梦数据库中&#xff0c;可以通过以下 SQL 查询当前兼容模式&#xff1a; SELECT para_name, para_value FROM v$dm_ini WHERE para_name COMPATIBLE_MODE;2. 设置兼容模式 使用 sp_set_para_value 函数设置…

如何申请微信支付0.2%-0.3%的手续费优惠? 详细步骤

随着微信支付在日常交易中的普及&#xff0c;许多商家开始关注如何降低支付手续费的问题。近期&#xff0c;微信支付推出了一项新的费率优惠政策&#xff0c;允许商家享受0.2%-0.3%的费率优惠。这一政策无疑为商家带来了实质性的成本节约。那么&#xff0c;商家如何申请这一费率…

Oracle RAC 集群配置共享目录ACFS

Oracle RAC 集群配置共享目录ACFS 应用场景&#xff1a;创建的ACFS文件系统用于部署OGG做数据同步使用。 1、创建共享磁盘组 create diskgroup OGG external redundancy disk /dev/mapper/ASM08, /dev/mapper/ASM09; 2、创建 acfs 文件系统 ACFS文件系统 在ASM磁盘组中通过A…

开源还是闭源这是一个问题

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

线性数据结构-数组

数组&#xff1a;线性数据结构&#xff08;一维数组结构&#xff09; 线性的数据结构强调存储和顺序 数组在内存存储空间上是连续的&#xff0c;并且长度固定不可变更 数组扩容 因为数组定长&#xff0c;当想往长度为8的数组中添加第九个元素时&#xff0c;操作系统会开辟一段…

如何在 c++ 里,让子类访问到父类的私有数据成员?答案之一:使用第三方友元类或友元函数

看 STL 库的代码时候&#xff0c;见有这种写法&#xff0c;感觉挺神奇的。故简化逻辑后&#xff0c;写个玩具验证一下。本来这是很别扭的做法。既然父类让数据成员私有了&#xff0c;还要让子类去调用&#xff0c;何苦呢&#xff1f;但看大师们的写法&#xff0c;果然 c 编译器…

LAMMPS - 分子动力学模拟器

本文翻译自&#xff1a;https://www.lammps.org/ 文章目录 一、关于 LAMMPS下载作者R&D 100 二、LAMMPS 亮点毛细血管中的血流 一、关于 LAMMPS 官网&#xff1a; https://www.lammps.org/ github &#xff1a;https://github.com/lammps/lammps LAMMPS 分子动力学模拟器…

上位机图像处理和嵌入式模块部署(f103 mcu定时器配置)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在mcu开发过程当中&#xff0c;有一种开发模式用的比较多&#xff0c;那就是中断while&#xff08;1&#xff09;。这里面的中断&#xff0c;又是以…

【mysql数据库】mycat中间件

MyCat 简介 Mycat 是数据库 中间件 。 1、 数据库中间件 中间件 是一类连接软件组件和应用的计算机软件&#xff0c; 以便于软件各部件之间的沟通 。 例子 Tomcat web 中间件 。 数据库 中间件 连接 java 应用程序和数据库 2、 为什么要用 Mycat ① Java 与数据库紧耦合 …

关于各种儿童竞赛的小讨论

大家好&#xff0c;我是阿赵。   在过去的一个周末&#xff0c;连续两天&#xff0c;我儿子都代表学校参加了小学组的竞赛&#xff0c;分别是GoC编程竞赛和小小科学家的化学竞赛。   我儿子今年4年级&#xff0c;在这读小学的4年里面&#xff0c;他加入过很多所谓的“校队”…

【Linux】操作系统之冯诺依曼体系

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 操作系统中 冯诺依曼体系 的相关内容。 如果看到最后您觉得这篇文…

数据仓库应该用什么方案——数据仓库实施方案概述

数据仓库的设计和实施是一个复杂的过程&#xff0c;通常需要根据具体的企业需求和资源来确定最佳的方案。以下是一个详细的数据仓库实施方案概述&#xff0c;但请注意&#xff0c;由于数据仓库的具体实现细节可能因技术栈、业务需求和数据源的不同而有所变化&#xff0c;因此我…

jsp实验19 File

三、源代码以及执行结果截图&#xff1a; readJSPFile.jsp <% page contentType"text/html" %> <% page pageEncoding "utf-8" %> <% page import"java.io.*"%> <style> #tom{ font-family:宋体;font-size:2…

基于Chisel语言的FPGA流水灯程序

目录 一、 内容概要二、 Chisel介绍三、 Chisel的使用四、 流水灯实现五、 心得体会六、 参考链接 一、 内容概要 Chisel介绍Chisel使用流程Chisel流水灯实操 二、 Chisel介绍 Chisel 是一种构建硬件描述语言&#xff08;HDL&#xff09;的高级编程语言&#xff0c;它允许硬…

盘点我们班的一些梗

六一儿童节马上就要到了&#xff0c;祝大家六一快乐哇&#xff01;今天就来盘点我们班的一些梗。 1.鲁滨逊一个&#xff0c;星期五两个 这个梗源自苏联拍的《鲁宾逊漂流记》&#xff0c;鲁滨逊对星期五说&#xff1a;“现在我们需要更多面包&#xff0c;因为我们有两个人。”…

指纹浏览器大全

具体请前往&#xff1a;国内外指纹浏览器大全

脚本编程游戏引擎的挑战与解决方案

哈喽呀&#xff0c;大家好&#xff0c;淼淼又来和大家见面啦&#xff0c;许多行业内的小伙伴们都知道脚本编程游戏引擎在游戏开发中扮演着越来越重要的角色。然而&#xff0c;脚本编程游戏引擎的开发和运行过程中往往会面临许多挑战和问题。这一期淼淼将带大家一起探讨脚本编程…

师彼长技以助己(2)产品思维

师彼长技以助己&#xff08;2&#xff09;产品思维 前言 我把产品思维称之为&#xff1a;人生底层的能力以及蹉跎别人还蹉跎自己的能力&#xff0c;前者说明你应该具备良好产品思维原因&#xff0c;后者是你没有好的产品思维去做产品带来的灾难。 人欲即天理 请大家谈谈看到这…

c++车票管理系统

这里写自定义目录标题 c车票管理系统vx:sredxc车票管理系统初始页面,需要源码vx:sredxc新增车票信息查询车票信息代码包含完整的发布车票信息,购票,退票,票数检测,余票检测,车票查询等功能 c车票管理系统vx:sredxc 这段代码实现了一个简单的高铁票务管理系统&#xff0c;具有以…