💡 为什么使用 <video> 标签？ 💡
在网页中嵌入视频可以大大提升用户体验，无论是用于展示产品演示、教学视频还是娱乐内容，都可以让你的网站更加吸引人。而且，使用 <video> 标签还可以让你更好地控制视频播放、暂停、快进等功能。
📚 基础知识 📚
在开始之前，我们需要了解一些基础知识：
HTML5：支持 标签的支持程度有所不同。 视频格式：常见的视频格式如 MP4、WebM 等。 🛠️ 准备工作 🛠️
首先，你需要有一个包含视频文件的服务器空间。接下来，我们将在一个 HTML 文件中实现嵌入视频的功能。
🌈 创建 HTML 文件 🌈
打开你的文本编辑器或 HTML 编辑器，新建一个 HTML 文件。接下来，我们将在这个文件中编写代码来嵌入视频。
🎉 编写 HTML 代码 🎉
现在，让我们动手写代码吧！我们将按照以下步骤来实现：
添加 标签添加多个视频格式。 设置属性：定义视频的初始状态和行为。 添加备用文本：在 标签内部添加文字，以便在无法播放视频时显示。
🎉 HTML 示例代码 🎉
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的视频页面</title>
</head>
<body>
<h1>欢迎来到我的视频页面！</h1>
<!-- 视频播放器 -->
<video width="640" height="360" controls preload="metadata">
<!-- 添加视频源 -->
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<!-- 如果浏览器不支持 video 标签则显示的文字 -->
<p>抱歉，您的浏览器不支持 HTML5 视频播放。</p>
</video>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>
🔍 代码解析 🔍
文档类型声明：<!DOCTYPE html> 告诉浏览器这是一个 HTML5 文档。
元数据：<meta> 标签设置字符集为 UTF-8，<title> 设置页面标题。
视频播放器：<video> 标签创建一个视频播放器。
width 和 height：设置视频播放器的宽度和高度。
controls：显示播放控件，如播放/暂停按钮、音量控制等。
preload：预加载视频数据。metadata 表示仅加载视频的元数据，如时长等。
视频源：<source> 标签添加多个视频格式，浏览器会尝试按顺序加载它们。
备用文本：如果浏览器不支持 <video> 标签，则显示备用文本。
🎉 深入探讨属性 🎉
让我们更深入地探讨一下 <video> 标签的一些重要属性：
autoplay：自动播放视频。
loop：循环播放视频。
muted：静音播放视频。
poster：设置视频加载前显示的封面图片。
controlsList：自定义播放控件列表，如 nodownload 禁止下载、nofullscreen 禁止全屏等。
🎉 JavaScript 交互 🎉
我们还可以使用 JavaScript 来控制 <video> 标签的行为。下面是一个简单的例子，展示了如何使用 JavaScript 播放和暂停视频：
<script>
// 获取视频元素
const myVideo = document.querySelector('video');
// 添加事件监听器
document.addEventListener('DOMContentLoaded', function() {
myVideo.addEventListener('click', function() {
if (myVideo.paused) {
myVideo.play(); // 开始播放视频
} else {
myVideo.pause(); // 暂停播放视频
}
});
});
</script>
🔍 JavaScript 代码解析 🔍
获取视频元素：使用 document.querySelector('video') 获取页面中的 <video> 元素。
添加事件监听器：当页面加载完成后，为 <video> 元素添加点击事件监听器。
播放/暂停逻辑：当视频被点击时，如果视频处于暂停状态，则开始播放；否则暂停播放。
🎉 运行代码 🎉
将上面的 HTML 代码保存到一个 .html 文件中，并将该文件与视频文件放在同一个目录下。然后，使用支持 <video> 标签的现代浏览器（如 Chrome、Firefox）打开这个 HTML 文件。你会看到视频播放器，可以播放、暂停、调整音量等。
🌟 结语 🌟
怎么样，是不是感觉非常简单又实用呢？通过简单的几行 HTML 代码，我们就实现了在网页中嵌入视频的功能。如果你对这个话题还有更多好奇的地方，或者在实践中遇到了问题，记得随时提问哦！🎈
❓ 互动提问 ❓
亲爱的读者们，你们在使用 <video> 标签时遇到过哪些有趣的问题？或者有没有什么特别想要深入了解的内容？欢迎留言分享，让我们一起探讨吧！
