最简单的代码
这是最基础的用法,浏览器会使用默认的播放控件来播放视频。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">MP4视频播放</title>
</head>
<body>
<video src="your-video-file.mp4" controls></video>
</body>
</html>
代码解释：
<video>: 这是HTML5中专门用于嵌入视频内容的标签。src="your-video-file.mp4":src属性指定了要播放的视频文件的路径。请务必将"your-video-file.mp4"替换成你自己的视频文件路径，这个路径可以是：- 相对路径：如果你的HTML文件和视频文件在同一个文件夹下，直接写文件名，如
my-cat.mp4，如果在子文件夹下，如videos/my-cat.mp4。 - 绝对路径：完整的网络URL，如
https://www.example.com/videos/my-cat.mp4。
- 相对路径：如果你的HTML文件和视频文件在同一个文件夹下，直接写文件名，如
controls: 这是一个非常重要的属性，它告诉浏览器显示一套默认的播放控件，包括播放/暂停、音量、进度条、全屏等按钮，如果没有这个属性,视频将无法被用户交互控制。
更完整的代码（推荐）
为了确保视频能在不同浏览器上正常播放，最佳实践是提供多种视频格式（因为不同浏览器对视频编码的支持不同）,并添加一些有用的附加属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">MP4视频播放 - 完整示例</title>
<style>
/* 让视频居中显示 */
video {
display: block;
margin: 0 auto;
max-width: 100%; /* 确保视频在小屏幕上不会溢出 */
}
</style>
</head>
<body>
<h1>我的视频</h1>
<video width="800" height="450" controls poster="video-poster.jpg">
<source src="my-video.mp4" type="video/mp4">
<!--
为了兼容性，可以添加其他格式的视频源
<source src="my-video.webm" type="video/webm">
<source src="my-video.ogv" type="video/ogg">
-->
<!-- 如果浏览器不支持 video 标签，显示这段文字 -->
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
</body>
</html>
代码解释：
<video> 标签的新属性：
width="800" height="450": 设置视频播放器的宽度和高度（以像素为单位），建议同时设置宽高，以防止视频加载时页面布局发生“跳动”，也可以使用CSS来设置尺寸（如上面的示例）。poster="video-poster.jpg":poster属性指定了在视频开始播放或用户点击播放之前显示的封面图片，这能提升用户体验,并提供一个视觉占位符。autoplay: 自动播放视频。注意： 由于浏览器策略，带有声音的自动播放通常会被阻止，如果你希望自动播放，通常需要配合muted属性。muted: 将视频设置为静音，结合autoplay使用可以实现静音自动播放。loop: 视频播放结束后,自动重新开始播放。preload:auto(默认): 浏览器会在页面加载后预加载视频元数据,甚至可能下载部分视频。metadata: 只预加载视频的元数据（如时长、尺寸等）。none: 不预加载任何内容,直到用户点击播放。
<source>
- 这是为了解决浏览器兼容性问题。
<video> 标签可以包含多个 <source> 标签，浏览器会按照顺序检查这些源，并播放第一个它能够识别和播放的格式。
.mp4: 使用 H.264 编码，是目前最通用、兼容性最好的格式。.webm: 一种开放、免费的视频格式，在Chrome、Firefox等现代浏览器中支持良好。.ogg: 另一种开放格式,主要在Firefox中得到支持。
type="video/mp4": 明确告诉浏览器这个文件的MIME类型，有助于浏览器更快地决定是否能播放,提高加载效率。
备用文本：
- 如果浏览器完全不支持
<video> 标签（非常罕见，除非是非常古老的浏览器），它将不会显示任何 <source> 标签的内容，而是直接显示 <video> 和 </video> 标签之间的文本。
使用 JavaScript 控制视频
你可能需要通过按钮等自定义控件来控制视频的播放、暂停等,这可以通过JavaScript来实现。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JS控制视频播放</title>
<style>
video { max-width: 100%; }
button { margin: 10px 5px; padding: 10px 15px; cursor: pointer; }
</style>
</head>
<body>
<video id="myVideo" width="600" controls>
<source src="my-video.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<div>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="muteBtn">静音</button>
<button id="unmuteBtn">取消静音</button>
</div>
<script>
// 获取 video 元素
const video = document.getElementById('myVideo');
// 获取按钮元素
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const muteBtn = document.getElementById('muteBtn');
const unmuteBtn = document.getElementById('unmuteBtn');
// 为按钮添加点击事件监听器
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
muteBtn.addEventListener('click', () => {
video.muted = true; // 设置为静音
});
unmuteBtn.addEventListener('click', () => {
video.muted = false; // 取消静音
});
</script>
</body>
</html>
代码解释：
- 给
<video> 标签添加了一个 id="myVideo"，这样我们就可以在JavaScript中通过 getElementById 精准地找到这个视频元素。
- 创建了几个按钮，每个按钮都有一个
id。
- 在
<script> 标签中,我们首先获取了视频元素和所有按钮的引用。
- 使用
addEventListener 方法为每个按钮添加了 click 事件，当按钮被点击时，就会执行对应的JavaScript代码，如 video.play()、video.pause() 等。
需求
推荐代码
最简单播放
<video src="video.mp4" controls></video>
最佳实践（兼容性+功能）
使用 <video> 包含多个 <source> 和 poster 属性。
自定义控制
使用 id 给 <video> 和控制按钮，然后用JavaScript绑定事件。
希望这些示例能帮助你轻松地在网页中嵌入MP4视频！
（图片来源网络，侵删）
- 这是为了解决浏览器兼容性问题。
<video>标签可以包含多个<source>标签，浏览器会按照顺序检查这些源，并播放第一个它能够识别和播放的格式。.mp4: 使用 H.264 编码，是目前最通用、兼容性最好的格式。.webm: 一种开放、免费的视频格式，在Chrome、Firefox等现代浏览器中支持良好。.ogg: 另一种开放格式,主要在Firefox中得到支持。
type="video/mp4": 明确告诉浏览器这个文件的MIME类型，有助于浏览器更快地决定是否能播放,提高加载效率。
备用文本：
- 如果浏览器完全不支持
<video>标签（非常罕见，除非是非常古老的浏览器），它将不会显示任何<source>标签的内容，而是直接显示<video>和</video>标签之间的文本。
使用 JavaScript 控制视频
你可能需要通过按钮等自定义控件来控制视频的播放、暂停等,这可以通过JavaScript来实现。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JS控制视频播放</title>
<style>
video { max-width: 100%; }
button { margin: 10px 5px; padding: 10px 15px; cursor: pointer; }
</style>
</head>
<body>
<video id="myVideo" width="600" controls>
<source src="my-video.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<div>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="muteBtn">静音</button>
<button id="unmuteBtn">取消静音</button>
</div>
<script>
// 获取 video 元素
const video = document.getElementById('myVideo');
// 获取按钮元素
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const muteBtn = document.getElementById('muteBtn');
const unmuteBtn = document.getElementById('unmuteBtn');
// 为按钮添加点击事件监听器
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
muteBtn.addEventListener('click', () => {
video.muted = true; // 设置为静音
});
unmuteBtn.addEventListener('click', () => {
video.muted = false; // 取消静音
});
</script>
</body>
</html>
代码解释：
- 给
<video>标签添加了一个id="myVideo"，这样我们就可以在JavaScript中通过getElementById精准地找到这个视频元素。 - 创建了几个按钮，每个按钮都有一个
id。 - 在
<script>标签中,我们首先获取了视频元素和所有按钮的引用。 - 使用
addEventListener方法为每个按钮添加了click事件，当按钮被点击时，就会执行对应的JavaScript代码，如video.play()、video.pause()等。
| 需求 | 推荐代码 |
|---|---|
| 最简单播放 | <video src="video.mp4" controls></video> |
| 最佳实践（兼容性+功能） | 使用 <video> 包含多个 <source> 和 poster 属性。 |
| 自定义控制 | 使用 id 给 <video> 和控制按钮，然后用JavaScript绑定事件。 |
希望这些示例能帮助你轻松地在网页中嵌入MP4视频！
（图片来源网络，侵删）
