HTML5视频搭配SVG实现异形遮罩播放的视觉方案

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>，需降级为CSS clip-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)强制图层提升