HTML中添加本地视频，可以通过多种方式实现,以下是一份详细的教程：
使用 <video> 标签直接嵌入视频
基本语法
HTML5引入了<video>标签，使得在网页中嵌入视频变得非常简单,以下是一个基本的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">加载本地视频示例</title>
</head>
<body>
<video width="600" controls>
<source src="videos/sample.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
</body>
</html>
在这个示例中，<video>标签用于加载和播放一个名为sample.mp4的本地视频文件。src属性指定视频文件的路径，type属性指定视频的MIME类型。controls属性用于显示视频控件（播放、暂停、音量等），如果浏览器不支持<video>标签，则会显示备用内容“您的浏览器不支持 HTML5 视频标签”。
指定正确的文件路径
确保视频文件路径正确是加载本地视频的关键,以下是一些常见的路径示例：
| 路径类型 | 示例 | 说明 |
|---|---|---|
| 相对路径 | <source src="videos/sample.mp4" type="video/mp4"> |
相对于当前HTML文件的路径，如果HTML文件位于根目录，而视频文件位于videos文件夹中，则使用相对路径videos/sample.mp4。 |
| 绝对路径 | <source src="/videos/sample.mp4" type="video/mp4"> |
基于网站根目录的路径，绝对路径以斜杠开头，表示从网站根目录开始查找文件。 |
| 相对上级路径 | <source src="../videos/sample.mp4" type="video/mp4"> |
如果HTML文件位于某个子目录中，而视频文件位于该子目录的上一级目录，则使用相对上级路径../videos/sample.mp4。 |
确保视频格式兼容
不同的浏览器支持不同的视频格式，常见的视频格式包括MP4、WebM和Ogg，为了确保视频在所有浏览器中都能正常播放，可以提供多种格式的视频文件,以下是一个示例：
<video width="600" controls>
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.webm" type="video/webm">
<source src="videos/sample.ogv" type="video/ogg">
您的浏览器不支持 HTML5 视频标签。
</video>
在这个示例中，提供了三种格式的视频文件,浏览器将会选择它支持的第一种格式进行播放。
视频标签的属性和方法
HTML5的<video>标签提供了丰富的属性和方法，可以用于控制视频的播放行为和样式,以下是一些常用的属性：
| 属性 | 说明 |
|---|---|
controls |
显示视频控件（播放、暂停、音量等）。 |
autoplay |
自动播放视频。 |
loop |
循环播放视频。 |
muted |
静音播放视频。 |
preload |
预加载视频，可以设置为auto（自动）、metadata（仅加载元数据）或none（不预加载），默认值为metadata。 |
poster |
指定视频封面的图像路径。 |
width |
设置视频播放器的宽度。 |
height |
设置视频播放器的高度。 |
使用JavaScript控制视频播放
除了使用<video>标签的属性，还可以通过JavaScript对视频进行更精细的控制,以下是一些常用的方法：
| 方法 | 说明 |
|---|---|
play() |
播放视频。 |
pause() |
暂停视频。 |
volume |
设置音量，取值范围为0.0（静音）到1.0（最大音量）。 |
currentTime |
设置或获取当前播放时间（以秒为单位）。 |
以下是一个完整的示例,展示了如何使用JavaScript控制视频播放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">使用 JavaScript 控制视频播放</title>
</head>
<body>
<video id="myVideo" width="600" controls>
<source src="videos/sample.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="setVolume(0.5)">设置音量为 50%</button>
<button onclick="seekTo(10)">跳转到第 10 秒</button>
<script>
function playVideo() {
document.getElementById('myVideo').play();
}
function pauseVideo() {
document.getElementById('myVideo').pause();
}
function setVolume(volume) {
document.getElementById('myVideo').volume = volume;
}
function seekTo(seconds) {
document.getElementById('myVideo').currentTime = seconds;
}
</script>
</body>
</html>
在这个示例中，通过JavaScript提供了四个按钮，分别用于播放、暂停、设置音量和跳转到特定时间。
响应式视频设计
为了让视频在不同设备上都能良好显示，可以使用CSS实现响应式设计,以下是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">响应式视频示例</title>
<style>
.responsive-video {
position: relative;
padding-bottom: 56.25%; / 16:9 /
height: 0;
overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed,
.responsive-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="responsive-video">
<video controls>
<source src="videos/sample.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
</div>
</body>
</html>
在这个示例中，使用了一个.responsive-video类，使视频能够根据其容器的大小自动调整尺寸，从而实现响应式设计。padding-bottom: 56.25%;用于保持16:9的宽高比。
使用开源播放器
除了使用<video>标签外，也可以使用一些开源的视频播放器，如Video.js、jPlayer等，这些播放器通常提供了更多的功能和更好的兼容性，以下是使用Video.js的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">使用 Video.js 播放本地视频</title>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="example.jpg" data-setup='{}'>
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.webm" type="video/webm">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
</body>
</html>
在这个示例中，首先引入了Video.js的CSS和JS文件，然后在页面中插入了一个带有id="my-video"的<video>标签，并设置了相关的属性和源文件，通过JavaScript初始化了Video.js播放器。
常见问题与解答（FAQs）
问题1：如何在HTML中加载本地视频文件？
答：在HTML中加载本地视频文件可以使用HTML5的<video>标签。<video src="video/video.mp4" controls></video>。src属性指定本地视频文件的路径，controls属性可以让用户控制视频的播放、暂停等操作。
问题2：我该如何确保本地视频在所有浏览器中都能正常播放？
答：为了确保本地视频在所有浏览器中都能正常播放，您可以使用多个视频格式来提供备选项，常用的视频格式有MP4、WebM和Ogg。
<video width="600" controls>
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.webm" type="video/webm">
<source src="videos/sample.ogv" type="video/ogg">
您的浏览器不支持 HTML5 视频标签。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/69507.html
