在Elementor中添加多格式视频URL，实现带Alpha透明视频跨浏览器兼容

完全可以通过Elementor组件配合少量代码实现，不用从头写完整HTML/CSS，下面给两种实用方案：

方案一：自定义HTML组件（最直接可控） #

Elementor的「自定义HTML」组件是最省心的方式，直接嵌入标准video标签，同时指定webm和HEVC mov格式，自动适配浏览器：

<video autoplay loop muted playsinline style="background: transparent; width: 100%; height: auto;">
  <source src="你的S3 CDN上的webm视频URL" type="video/webm">
  <source src="你的S3 CDN上的hevc.mov视频URL" type="video/quicktime; codecs=hvc1">
</video>

• 把上述代码里的URL替换成你的S3地址
• playsinline 用于保证移动端正常播放
• 样式里的 background: transparent 确保视频容器不会遮挡透明通道
• 浏览器会自动优先加载支持的格式：Chrome用webm，Safari用mov

如果需要给视频加容器样式，直接在自定义HTML组件外面套一个Elementor的「容器」组件，再给容器加自定义CSS即可。

方案二：改造Elementor原生视频组件（适合习惯可视化操作的场景） #

如果你不想写HTML，可以用Elementor原生的「视频」组件，配合少量JS添加第二个视频源：

1. 拖入Elementor「视频」组件，在「视频URL」里填入你的webm格式地址（S3 CDN链接）
2. 给这个视频组件添加自定义CSS类，比如 alpha-video（在组件「高级」→「CSS类」里设置）
3. 在页面的「自定义代码」→「页眉」（或「页脚」）里添加以下JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const alphaVideos = document.querySelectorAll('.alpha-video video');
  alphaVideos.forEach(video => {
    // 创建HEVC mov的source标签
    const movSource = document.createElement('source');
    movSource.src = '你的S3 CDN上的hevc.mov视频URL';
    movSource.type = 'video/quicktime; codecs=hvc1';
    // 插入到webm source之前，让浏览器优先检测支持的格式
    video.insertBefore(movSource, video.firstChild);
    // 确保视频背景透明
    video.style.background = 'transparent';
  });
});

• 替换代码里的mov视频URL
• 这段代码会自动给指定类的视频组件添加第二个视频源，实现浏览器兼容

关键注意事项 #

• S3 CORS配置：确保你的S3桶的CORS规则允许Elementor网站的域名访问视频资源，否则会出现跨域加载失败
• 视频编码要求：Safari的HEVC mov必须带Alpha通道，推荐用ProRes 4444或者HEVC with Alpha编码导出；webm用VP9编码带Alpha即可
• 自动播放策略：必须添加 muted 属性，否则浏览器会阻止自动播放
• 测试验证：分别在Chrome和Safari里测试，查看网络请求确认浏览器加载了对应格式的视频

内容的提问来源于stack exchange，提问作者zdusper