推荐使用html5的
在HTML中嵌入视频主要有三种方式，最核心和现代的方法是使用HTML5的标签，它能直接在浏览器中播放视频而无需插件。此外，对于YouTube、Bilibili等第三方视频平台，通常会使用标签来嵌入它们提供的播放器。还有一些老旧或特定场景下可能会用到的或标签，但它们现在已经很少被推荐了。
解决方案
要将视频嵌入网页，我个人最推荐且最常用的就是HTML5的标签。它功能强大，兼容性好，而且给了开发者很大的控制权。
一个基本的标签用法是这样的：
立即学习“前端免费学习笔记（深入）”；
这里面有几个关键点：
-
controls属性：加上它，用户就能看到播放、暂停、音量调节、全屏等控制按钮。如果没有这个，视频会播放但用户无法操作，体验会很糟糕。 -
width和height：定义视频播放器的尺寸。当然，你也可以用CSS来控制，甚至让它响应式。 -
poster：在视频加载完成或播放前，显示一张预览图。这对于用户体验来说非常重要，能让他们对视频内容有个初步了解。 -
-
标签里的内容：这是当浏览器完全不支持标签时的备用内容，虽然现在很少见，但总归是个好习惯。
除了这些，还有一些常用的属性，比如autoplay（自动播放，但现在很多浏览器会限制，除非视频静音），loop（循环播放），muted（静音播放）。我个人建议，如果非要自动播放，请务必加上muted，不然突然的声响会吓到用户，体验极差。
为什么推荐使用HTML5的
说实话，用HTML5的标签来嵌入视频，对我来说简直是福音。想想以前Flash时代，为了在网页上播个视频，得装插件、考虑兼容性，各种头疼。现在，标签直接原生支持，这意味着用户不需要安装任何额外的软件，视频就能流畅播放。这不仅仅是方便，更是大大提升了用户体验。
它最大的优势在于其“无插件”特性。浏览器直接解析和渲染视频，这不仅让加载速度更快，也减少了潜在的安全风险。而且，它对移动设备的支持简直是太友好了。在手机和平板上，HTML5视频能自动适应屏幕大小，触控操作也更自然，这在响应式设计越来越重要的今天，简直是标配。
另外，标签还提供了丰富的API接口，允许开发者用JavaScript来控制视频的播放、暂停、音量、进度等，甚至可以自定义播放器界面。这种灵活性是老旧方法望尘莫及的。从可访问性角度看，它也支持标签来添加字幕或描述音轨，这对于有听力或视力障碍的用户来说，是非常重要的功能。综合来看，无论从性能、兼容性、用户体验还是开发灵活性上，HTML5的标签都是当之无愧的首选。
如何嵌入来自YouTube或Bilibili的视频？
当我们想嵌入YouTube或Bilibili这类第三方平台的视频时，情况就有点不一样了。我们通常不会直接下载他们的视频文件然后用标签播放（这也不符合版权规定）。这些平台会提供一个“嵌入代码”，而这个代码的核心就是标签。
，说白了，就是在你的网页里开辟一个独立的“窗口”，这个窗口里加载的是另一个网页的内容。对于视频平台来说，这个“另一个网页”就是他们的视频播放器页面。
比如，在YouTube上，你找到一个视频，点击“分享”->“嵌入”，它会给你一段类似这样的代码：
Bilibili也类似，在视频播放页下方找到“分享”->“嵌入代码”：
这里面几个重要的属性：
-
src：这是最重要的，它指向视频播放器的URL。 -
width和height：定义播放器的尺寸。 -
frameborder="0"：通常用来移除默认的边框，让播放器看起来更融合。 -
allowfullscreen：允许用户将视频全屏播放。 -
allow：这是一个比较新的属性，用来控制内部允许执行哪些特性，比如autoplay（自动播放）、picture-in-picture（画中画）等。
使用嵌入外部视频的好处是显而易见的：你不需要关心视频的托管、格式转换、播放器开发等复杂问题，一切都由第三方平台搞定。但也有它的局限性，比如你对播放器的样式和功能控制就非常有限，而且加载外部内容可能会有性能和安全上的考量。我个人在使用时，会特别注意的尺寸设置，确保它在不同设备上也能良好显示，可能需要配合CSS做一些响应式处理。
视频嵌入时有哪些常见的兼容性问题和优化技巧？
在实际操作中，视频嵌入并非总是那么一帆风顺，总会遇到一些兼容性问题和需要优化的地方。
首先，视频格式的兼容性是老生常谈的问题。尽管MP4（H.264编码）现在是主流，几乎所有浏览器都支持，但为了最大限度地覆盖用户，我通常还是会提供WebM格式作为备选。WebM通常有更好的压缩效率，而且是开放标准。我的经验是，使用
其次是性能优化。视频文件通常很大，直接加载会拖慢网页速度。
-
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属性：循环播放，适用于背景视频或短片段。 - 字幕和描述：使用
标签为视频添加字幕（kind="subtitles"）、标题（kind="captions"）或描述（kind="descriptions"）。这不仅对听障用户有帮助，也能提升SEO。
这些细节看似琐碎，但它们共同构成了用户友好的视频播放体验，并且能有效避免一些常见的坑。
