怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式-html教程-PHP中文网

怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式

星降

发布： 2025-07-29 14:51:01

原创

1475人浏览过

推荐使用html5的<video>标签嵌入视频，因为它无需插件、兼容性好且提供强大控制功能；2. 对于youtube或bilibili等平台视频，应使用其提供的<iframe>嵌入代码，以便直接调用平台播放器；3. 解决兼容性问题需提供mp4和webm双格式源文件，优化性能可设置preload="none"、使用poster预览图，并通过css实现响应式布局，同时谨慎使用autoplay并添加muted属性以提升用户体验，最终确保视频在各类设备和浏览器中稳定播放且具备良好可访问性。

怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式

在HTML中嵌入视频主要有三种方式，最核心和现代的方法是使用HTML5的<video>标签，它能直接在浏览器中播放视频而无需插件。此外，对于YouTube、Bilibili等第三方视频平台，通常会使用<iframe>标签来嵌入它们提供的播放器。还有一些老旧或特定场景下可能会用到的<embed>或<object>标签，但它们现在已经很少被推荐了。

解决方案

要将视频嵌入网页，我个人最推荐且最常用的就是HTML5的<video>标签。它功能强大，兼容性好，而且给了开发者很大的控制权。

一个基本的<video>标签用法是这样的：

立即学习“前端免费学习笔记（深入）”；

<video controls width="640"    style="max-width:90%" poster="your-video-poster.jpg">
  <source src="your-video.mp4" type="video/mp4">
  <source src="your-video.webm" type="video/webm">
  <p>您的浏览器不支持HTML5视频播放。</p>
</video>

登录后复制

这里面有几个关键点：

controls 属性：加上它，用户就能看到播放、暂停、音量调节、全屏等控制按钮。如果没有这个，视频会播放但用户无法操作，体验会很糟糕。
width 和 height：定义视频播放器的尺寸。当然，你也可以用CSS来控制，甚至让它响应式。
poster：在视频加载完成或播放前，显示一张预览图。这对于用户体验来说非常重要，能让他们对视频内容有个初步了解。
<source> 标签：这是处理视频格式兼容性的关键。不同的浏览器对视频格式的支持程度不一样（比如Safari偏爱MP4，Firefox和Chrome对WebM支持很好）。所以，提供多种格式的视频源，浏览器会选择它支持的第一个来播放。这就像给浏览器一个备选清单，总能找到一个合适的。
<p> 标签里的内容：这是当浏览器完全不支持<video>标签时的备用内容，虽然现在很少见，但总归是个好习惯。

除了这些，还有一些常用的属性，比如autoplay（自动播放，但现在很多浏览器会限制，除非视频静音），loop（循环播放），muted（静音播放）。我个人建议，如果非要自动播放，请务必加上muted，不然突然的声响会吓到用户，体验极差。

为什么推荐使用HTML5的`<video>`标签？

说实话，用HTML5的<video>标签来嵌入视频，对我来说简直是福音。想想以前Flash时代，为了在网页上播个视频，得装插件、考虑兼容性，各种头疼。现在，<video>标签直接原生支持，这意味着用户不需要安装任何额外的软件，视频就能流畅播放。这不仅仅是方便，更是大大提升了用户体验。

它最大的优势在于其“无插件”特性。浏览器直接解析和渲染视频，这不仅让加载速度更快，也减少了潜在的安全风险。而且，它对移动设备的支持简直是太友好了。在手机和平板上，HTML5视频能自动适应屏幕大小，触控操作也更自然，这在响应式设计越来越重要的今天，简直是标配。

另外，<video>标签还提供了丰富的API接口，允许开发者用JavaScript来控制视频的播放、暂停、音量、进度等，甚至可以自定义播放器界面。这种灵活性是老旧方法望尘莫及的。从可访问性角度看，它也支持<track>标签来添加字幕或描述音轨，这对于有听力或视力障碍的用户来说，是非常重要的功能。综合来看，无论从性能、兼容性、用户体验还是开发灵活性上，HTML5的<video>标签都是当之无愧的首选。

如何嵌入来自YouTube或Bilibili的视频？

当我们想嵌入YouTube或Bilibili这类第三方平台的视频时，情况就有点不一样了。我们通常不会直接下载他们的视频文件然后用<video>标签播放（这也不符合版权规定）。这些平台会提供一个“嵌入代码”，而这个代码的核心就是<iframe>标签。

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

150

查看详情

<iframe>，说白了，就是在你的网页里开辟一个独立的“窗口”，这个窗口里加载的是另一个网页的内容。对于视频平台来说，这个“另一个网页”就是他们的视频播放器页面。

比如，在YouTube上，你找到一个视频，点击“分享”->“嵌入”，它会给你一段类似这样的代码：

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

登录后复制

Bilibili也类似，在视频播放页下方找到“分享”->“嵌入代码”：

<iframe src="//player.bilibili.com/player.html?aid=XXXXXX&bvid=XXXXXX&cid=XXXXXX&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

登录后复制

这里面几个重要的属性：

src：这是最重要的，它指向视频播放器的URL。
width 和 height：定义播放器的尺寸。
frameborder="0"：通常用来移除<iframe>默认的边框，让播放器看起来更融合。
allowfullscreen：允许用户将视频全屏播放。
allow：这是一个比较新的属性，用来控制<iframe>内部允许执行哪些特性，比如autoplay（自动播放）、picture-in-picture（画中画）等。

使用<iframe>嵌入外部视频的好处是显而易见的：你不需要关心视频的托管、格式转换、播放器开发等复杂问题，一切都由第三方平台搞定。但也有它的局限性，比如你对播放器的样式和功能控制就非常有限，而且加载外部内容可能会有性能和安全上的考量。我个人在使用时，会特别注意<iframe>的尺寸设置，确保它在不同设备上也能良好显示，可能需要配合CSS做一些响应式处理。

视频嵌入时有哪些常见的兼容性问题和优化技巧？

在实际操作中，视频嵌入并非总是那么一帆风顺，总会遇到一些兼容性问题和需要优化的地方。

首先，视频格式的兼容性是老生常谈的问题。尽管MP4（H.264编码）现在是主流，几乎所有浏览器都支持，但为了最大限度地覆盖用户，我通常还是会提供WebM格式作为备选。WebM通常有更好的压缩效率，而且是开放标准。我的经验是，使用<source>标签提供多个格式，这几乎能解决99%的格式兼容性问题。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

登录后复制

其次是性能优化。视频文件通常很大，直接加载会拖慢网页速度。

preload 属性就显得尤为重要：
- none：不预加载任何数据，只在用户点击播放时才开始下载。这是我个人最推荐的设置，尤其对于非核心内容。
- metadata：只预加载视频的元数据（如时长、尺寸等），不会下载视频内容。
- auto：浏览器自行决定是否预加载整个视频。除非视频是页面的核心内容，否则我很少用这个。
poster 属性：前面提过，它能显示一张预览图。这张图应该尽可能小，但质量要够用，避免加载大图导致页面卡顿。
响应式设计：视频在移动设备上经常会超出屏幕。最简单的CSS解决方案是让视频元素或其容器max-width: 100%; height: auto;。如果需要保持特定的宽高比（比如16:9），可以利用padding-bottom结合position: relative/absolute的技巧，这能让视频在不同屏幕尺寸下保持正确的比例。

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
  height: 0;
  overflow: hidden;
}
.video-container video,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

登录后复制

最后，用户体验和可访问性。

autoplay 的使用要非常谨慎，现代浏览器大多会限制自动播放，除非视频是静音的。如果一定要自动播放，加上muted属性是基本礼仪。
loop 属性：循环播放，适用于背景视频或短片段。
字幕和描述：使用<track>标签为视频添加字幕（kind="subtitles"）、标题（kind="captions"）或描述（kind="descriptions"）。这不仅对听障用户有帮助，也能提升SEO。

<video controls src="video.mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文">
</video>

登录后复制

这些细节看似琐碎，但它们共同构成了用户友好的视频播放体验，并且能有效避免一些常见的坑。

以上就是怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式的详细内容，更多请关注php中文网其它相关文章！