HTML5视频可通过SVG clipPath配合CSS clip-path实现异形遮罩，兼容Chrome/Firefox/Safari/Edge 104+；需内联SVG定义路径并设置clip-path: url(#mask)，或用foreignObject嵌入视频以支持SVG动画联动，注意移动端性能与旧版WebView降级方案。
HTML5视频本身不支持直接用SVG路径做异形遮罩，但通过clipPath配合<video>的CSS渲染层叠，可以稳定实现非矩形区域的视频播放效果。关键在于让视频成为SVG的<foreignObject>子内容，或利用CSS clip-path引用SVG定义的裁剪路径。
用SVG clipPath + CSS clip-path 实现兼容方案
这是目前最实用、浏览器支持度高（Chrome/Firefox/Safari/Edge 104+）的方式，无需复杂Canvas合成。
- 在SVG中定义
<clipPath id="mask"><path d="M..."/></clipPath>，路径可任意复杂（星形、波浪、手绘轮廓等） - 给
<video>元素添加CSS：clip-path: url(#mask); - 确保视频父容器有明确尺寸且
overflow: hidden，避免裁剪外溢 - 注意：Safari对内联SVG
clipPath的URL引用需同源，建议将SVG内联在HTML顶部或使用外部SVG文件并确保CORS
用<foreignObject>把视频嵌入SVG内部（适合动画联动）
当需要视频随SVG图形缩放、旋转、响应式变形，或与SVG滤镜/动画同步时，此方式更灵活。
- 在SVG中插入
<foreignObject width="640" height="360"><video src="..." /></foreignObject> - 视频样式需重置：
video { width: 100%; height: 100%; border: none; } - 可直接对
<foreignObject>应用transform、filter或绑定SMIL/JS动画 - 限制：部分旧版Android WebView不支持
foreignObject中的<video>，需降级为CSSclip-path方案
动态更新遮罩路径（如跟随鼠标/滚动变化）
通过JS实时修改<path>的d属性，可实现交互式异形播放效果。
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById('maskPath').setAttribute('d', newPath)更新路径 - 推荐使用
requestAnimationFrame控制更新频率，避免卡顿 - 若路径计算开销大（如实时追踪人脸轮廓），建议在Web Worker中预处理坐标，再传回主线程更新
- 示例场景：滚动页面时，遮罩从圆形渐变为菱形；悬停按钮时，视频区域局部放大高亮
性能与兼容性注意事项
异形遮罩会增加GPU合成负担，尤其在移动设备上需谨慎优化。
- 避免在
clipPath中使用超多锚点的路径（建议控制在200个点以内），否则渲染帧率下降明显 - 安卓WebView 75以下不支持CSS
clip-path引用SVG，可用-webkit-mask+ PNG遮罩图降级 - 视频启用
playsinline和webkit-playsinline，防止iOS全屏劫持破坏遮罩布局 - 测试时务必检查
will-change: clip-path是否触发硬件加速，必要时加transform: translateZ(0)强制图层提升
