直接用标签嵌入视频，基础写法需src属性指向mp4或webm等网络路径并加controls；多格式兼容推荐标签按优先级罗列；关键属性包括poster、autoplay muted、loop和preload；外部平台视频须用iframe而非video标签。
直接用 <video></video> 标签就能嵌入视频，不需要插件，也不用复杂配置。关键是把格式、路径和基础属性配对好，浏览器自己会处理播放。
Video标签的基础写法
最简形式只要两样：src 指向视频文件，加上 controls 显示操作按钮。
<video src="demo.mp4" controls></video>
注意：src 值必须是相对路径（如 videos/intro.mp4）或 HTTPS 网络地址（如 https://cdn.example.com/clip.webm），不能用本地 file:// 路径，否则上线后无法加载。
让不同浏览器都能播的多格式写法
MP4（H.264 编码）兼容性最好，但 Firefox 和部分版本 Chrome 更倾向 WebM；只放 MP4，可能在某些环境失效。推荐这样写：
- 把
src移到<source></source>里，按兼容优先级排序 - 浏览器自动选第一个能解码的格式
<video controls width="640" height="360"><source src="demo.mp4" type="video/mp4"><source src="demo.webm" type="video/webm"> 您的浏览器不支持视频播放。 </source></source></video>
最后一行文本是降级提示，当所有格式都不支持时才显示。
提升体验的关键属性
-
poster="cover.jpg"：视频加载前显示封面图，避免黑屏或空白 -
autoplay muted：想自动播放必须加muted，否则现代浏览器会拦截（哪怕用户没动过页面） -
loop：适合背景视频、产品轮播等场景 -
preload="metadata"：只预加载时长、尺寸等信息，减少首屏卡顿
嵌入外部平台视频（如B站、YouTube）不用video标签
它们有独立 CDN 和版权策略，直接引用 .mp4 链接大概率失败（跨域或被拒绝）。正确做法是复制平台提供的 <iframe></iframe> 代码，粘贴进 HTML 即可，比如：
<iframe src="https://www.bilibili.com/embed/xxxxx" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
