html 怎么加入网页视频
在网页中加入视频是很常见的需求，HTML提供了一些内置的标签和属性来帮助我们实现这个功能，本文将详细介绍如何在HTML中加入网页视频，包括使用<video>标签、<source>标签、<track>标签等方法，以及如何调整视频的尺寸、控制播放等操作。
1. 使用<video>标签
我们需要了解<video>标签，这是一个HTML5新增的标签，用于在网页中嵌入视频内容。<video>标签可以包含一个或多个<source>标签，每个<source>标签指定一个视频文件的URL，浏览器会按照顺序尝试加载这些视频文件，直到找到一个可以播放的文件为止。
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>网页视频示例</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
</video>
</body>
</html>
在这个示例中，我们设置了<video>标签的宽度和高度为320x240像素，并添加了controls属性，使用户可以通过浏览器提供的控件控制视频的播放，我们还添加了一个<source>标签，指定了一个名为movie.mp4的视频文件的URL，如果浏览器不支持HTML5视频，将显示“您的浏览器不支持HTML5视频。”这段文字。
2. 使用<source>标签
如前所述，我们可以在<video>标签中添加多个<source>标签，以提供多个备选的视频文件，这样，即使某个视频文件无法播放，浏览器也可以继续尝试加载其他文件。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持HTML5视频。
</video>
在这个示例中，我们添加了一个名为movie.webm的WebM格式的视频文件作为备选，如果浏览器不支持MP4格式的视频，它将尝试加载WebM格式的视频，如果两者都不支持，将显示“您的浏览器不支持HTML5视频。”这段文字。
3. 使用<track>标签
除了视频文件本身，我们还可以使用<track>标签为视频添加字幕、音轨等信息。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>
在这个示例中，我们添加了一个名为captions.vtt的字幕文件作为备选，我们设置了kind属性为subtitles，表示这是一个字幕文件；设置了srclang属性为en，表示字幕的语言为英语；设置了label属性为“English”，表示这个字幕文件对应的语言标签，这样，当用户需要查看英文字幕时，浏览器会自动加载这个字幕文件。
4. 调整视频尺寸和控制播放
通过设置<width和height属性，我们可以调整视频的尺寸。
<style>
video {
maxwidth: 100%; /* 自适应宽度 */
height: auto; /* 保持宽高比 */
}
</style>
在这个示例中，我们设置了视频的最大宽度为100%，使其自适应容器的宽度；同时设置了高度为自动，使视频保持宽高比，这样，无论容器的大小如何变化，视频都会保持合适的尺寸。
通过添加JavaScript代码，我们可以实现更复杂的控制功能，例如播放、暂停、快进、快退等。
<button onclick="playPause()">播放/暂停</button>
<button onclick="rewind()">后退10秒</button>
<button onclick="forward()">前进10秒</button>
<script>
var video = document.querySelector('video');
var duration = video.duration; // 获取视频时长（秒）
var currentTime = 0; // 当前播放时间（秒）
var step = 10; // 每次操作的时间间隔（秒）
function playPause() {
if (video.paused) { // 如果视频已暂停，则播放视频
video.play();
} else { // 如果视频正在播放，则暂停视频
video.pause();
}
}
function rewind() { // 后退指定的时间间隔（秒）
currentTime = step; // 更新当前播放时间（秒）
if (currentTime < 0) { // 如果当前播放时间小于0，则设置为0（即回到视频开头）
currentTime = 0;
} else { // 否则，设置视频的当前播放时间为更新后的值（秒）
video.currentTime = currentTime;
}
}
function forward() { // 前进指定的时间间隔（秒）
currentTime += step; // 更新当前播放时间（秒）
if (currentTime > duration) { // 如果当前播放时间大于视频时长，则设置为视频时长（即回到视频结尾）
currentTime = duration;
} else { // 否则，设置视频的当前播放时间为更新后的值（秒）
video.currentTime = currentTime;
}
}
</script>
