HTML中用<video>标签插入视频最直接，需加controls属性显示控件，优先用MP4格式，确保URL可公开访问且支持CORS，避免本地路径。
HTML 中用 <video> 标签插入视频最直接
在线运行环境（如 JSFiddle、CodePen、replit）里加视频，核心就是用原生 <video> 标签，不需要额外库或框架。它支持 MP4、WebM、OGV 等格式，其中 mp4 兼容性最好，推荐优先用。
常见错误是直接写 <video src="xxx.mp4"></video> 却没加 controls 属性——结果页面一片空白，连播放按钮都没有。
实操建议：
- 必须加上
controls属性才能显示播放控件（暂停、音量、进度条） - 建议同时加
width和height，否则默认尺寸可能极小或拉伸变形 - 如果视频文件不在本地，用在线可公开访问的 URL（比如 GitHub raw 链接、Cloudflare R2、或
https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/...这类公开示例地址） - 避免用本地路径（如
file:///xxx.mp4），在线运行环境无法读取本地文件系统
为什么加了 <source> 标签还是不播放？
<source> 是为了提供多格式回退支持，不是“加了就一定能播”。浏览器会按顺序尝试每个 <source>，遇到第一个能解码的就停，其余忽略。但前提是：所有链接必须返回正确的 MIME 类型（video/mp4、video/webm），且服务器允许跨域（CORS）。
立即学习“前端免费学习笔记（深入）”；
典型失败场景：
- GitHub 仓库里的 MP4 直链（
github.com/.../blob/.../xxx.mp4）实际返回的是 HTML 页面，不是视频流 → 改用raw.githubusercontent.com域名 - 某些网盘或私有 CDN 返回的响应头缺少
Access-Control-Allow-Origin: *→ 浏览器报错Blocked by CORS policy -
<source>的type写错，比如写成type="mp4"（正确是type="video/mp4"）
简单验证方式：把 src 地址单独粘贴到新标签页，看能否直接下载或播放。
<video> 的常用属性和行为细节
除了 controls，几个关键属性直接影响体验：
-
autoplay：现代浏览器基本要求同时带muted才允许自动播放，否则静音也不行（防骚扰策略） -
loop：循环播放，适合背景视频或演示片段 -
preload="metadata"：只预加载时长、尺寸等元信息，减少初始流量；设为"auto"可能提前下载全部视频（慎用） -
poster：指定封面图 URL，在视频加载前显示，提升首屏观感
注意：autoplay + controls 组合下，部分浏览器仍可能暂停并显示“播放”按钮（尤其移动端），这是正常行为，不是 bug。
在线运行环境里调试视频加载失败的三步定位法
如果视频不显示、黑屏、或控制栏灰掉，按顺序查：
- 打开浏览器开发者工具（F12），切到
Network标签，刷新页面，找对应视频请求 → 看状态码（404？403？）、响应头（Content-Type是否正确？是否有Access-Control-Allow-Origin？） - 在
Console里搜关键词：MediaError、CORS、Failed to load resource—— 错误信息通常很直白 - 右键视频区域 → “检查元素”，确认
<video>标签是否被渲染出来，src或<source>的值是否拼写正确（大小写、斜杠、扩展名）
很多问题其实卡在链接本身不可用，而不是代码写错。先确保视频 URL 能独立打开，再嵌入 HTML。
