最基础的核心代码
这是实现手机网页播放 MP4 最简单直接的方法。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">手机视频播放示例</title>
<style>
/* 让视频占满整个屏幕宽度，高度自适应 */
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>我的视频</h1>
<video src="你的视频文件.mp4" controls>
<!-- 如果浏览器不支持 video 标签，这里的内容会显示 -->
您的浏览器不支持 HTML5 视频。
</video>
</body>
</html>
代码解释:
<video>: 这是 HTML5 的视频标签。src="你的视频文件.mp4": 指定要播放的视频文件路径，这个路径可以是：- 相对路径:
videos/my-video.mp4(视频文件和 HTML 文件在同一目录下)。 - 绝对路径:
https://www.example.com/videos/my-video.mp4。
- 相对路径:
controls: 这是一个非常重要的属性，它会在视频下方添加一套默认的播放控件，包括播放/暂停、进度条、音量、全屏等按钮。没有这个属性，用户将无法控制视频。<video>标签内的文本: 这是在非常老旧的浏览器（不支持 HTML5）中显示的提示信息。
最佳实践：使用 <source> 标签（推荐）
为了兼容不同的浏览器和设备（因为它们可能支持不同的视频编码格式），最佳实践是提供多个视频源,浏览器会自动选择它能播放的第一个格式。
<video controls width="100%" poster="视频封面图.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
您的浏览器不支持 HTML5 视频，请升级浏览器。
</video>
代码解释:
<source>: 为<video>标签提供多个媒体源。src: 指定不同格式的视频文件。type: 非常重要！ 指定视频文件的 MIME 类型，这能帮助浏览器快速判断是否能播放，从而避免不必要的下载尝试。type="video/mp4": 最常见的格式,兼容性最好。type="video/webm": Google 推出的开源格式，文件通常较小,在现代浏览器中支持良好。type="video/ogg": 另一种开源格式。
为什么推荐这样做？
（图片来源网络，侵删）
- 兼容性: 覆盖所有现代浏览器。
- 性能: 浏览器会优先选择它最支持的格式,减少加载失败或转码的麻烦。
- 效率: 对于移动端，
webm格式通常文件更小,能节省用户流量和加载时间。
针对手机端的优化建议
手机网页播放视频，除了基本功能,还需要考虑用户体验和性能。
自动播放
强烈建议不要使用 autoplay，在大多数现代浏览器（尤其是移动端）中，出于节省流量和尊重用户的原则，自动播放（特别是带有声音的）是被默认禁止的。
<!-- 不推荐，通常无效或被静音 --> <video src="video.mp4" autoplay></video>
如果你想在页面加载后自动播放视频，可以尝试以下方法,但请注意浏览器策略可能会限制它：
<!-- 尝试静音自动播放，这在移动端浏览器中更可能被允许 --> <video src="video.mp4" autoplay muted loop></video>
muted: 视频静音播放。loop: 视频播放完后自动重新开始。
添加视频封面图
使用 poster 属性可以设置视频在播放前显示的封面图,提升用户体验。
（图片来源网络，侵删）
<video controls poster="https://example.com/path/to/poster.jpg">
<source src="video.mp4" type="video/mp4">
</video>
响应式设计
确保视频在不同尺寸的手机屏幕上都能良好显示。
video {
width: 100%; /* 视频宽度始终是其父容器的100% */
max-width: 100%; /* 防止视频溢出容器 */
height: auto; /* 高度根据宽度自动调整，保持比例 */
}
预加载
preload 属性可以控制视频的预加载行为。
preload="auto"(或直接省略): 浏览器会尝试下载整个视频或至少第一部分，默认值,但可能消耗较多流量。preload="metadata": 浏览器只下载视频的元数据（如时长、尺寸），不下载视频内容，这是在移动端非常推荐的设置,可以节省用户流量。preload="none": 不预加载任何内容,直到用户点击播放。
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4">
</video>
一个完整的、手机端优化的示例
下面是一个综合了所有最佳实践的完整 HTML 页面代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- user-scalable=no 可以禁止用户缩放，提供更沉浸的体验，但请谨慎使用 -->手机视频播放完整示例</title>
<style>
/* 基础样式重置和页面布局 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
/* 视频容器，可以用来添加一些额外的样式，比如阴影 */
.video-container {
max-width: 800px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden; /* 让圆角效果应用到视频 */
}
/* 视频样式 */
video {
width: 100%;
height: auto;
display: block; /* 移除视频下方可能出现的空白间隙 */
}
h1 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>手机视频播放完整示例</h1>
<div class="video-container">
<video
controls
preload="metadata"
poster="https://via.placeholder.com/800x450.png/007BFF/FFFFFF?text=Video+Poster"
width="100%">
<!-- 优先使用 WebM，因为它通常文件更小 -->
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<!-- 备用源，如果浏览器不支持 MP4，可以添加 WebM 或 OGG -->
<!-- <source src="path/to/your/video.webm" type="video/webm"> -->
<!-- 兼容性提示 -->
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
</div>
</body>
</html>
要在手机网页上播放 MP4 视频,请遵循以下步骤：
- 使用
<video> 作为容器。 - 添加
controls属性 以提供用户交互控件。 - 使用
<source> 提供 MP4、WebM 等多种格式，并带上正确的type属性,以获得最佳兼容性。 - 设置
preload="metadata"来优化移动端流量。 - 使用
poster属性 添加视频封面,提升用户体验。 - 通过 CSS 确保视频是响应式的（
width: 100%; height: auto;）。
将上述代码中的 src 和 poster 路径替换为你自己的文件路径,就可以直接使用了。
