我可以使用 HTML5 视频标签制作具有透明背景的 mp4 视频吗？答案

【问题标题】：Can I have a mp4 video with transparent background using HTML5 video tag?我可以使用 HTML5 视频标签制作具有透明背景的 mp4 视频吗？
【发布时间】：2015-06-15 09:14:26
【问题描述】：

我在这里尝试做一些事情是 url：check this link 在 myh 本地系统中我看不到视频。至少 jsfidlle 是展示视频。

<h1>HTML5 Video with alpha transparency</h1>
<div>
  <video id="video" style="display:none" autoplay>
    <source src="http://jakearchibald.com/scratch/alphavid/compressed.mp4" type='video/mp4; codecs="avc1.42E01E"' />
    <source src="http://jakearchibald.com/scratch/alphavid/compressed.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>
  <canvas width="480" height="488" id="buffer"></canvas>
  <canvas width="480" height="244" id="output"></canvas>
</div>
<p> <a href="#" id="randomBg">Random background colour</a> - <a href="#" id="stop">Stop</a> - <a href="#" id="start">Start</a> - <a href="#" id="toggleProcessing">Toggle Processing</a> </p>

【问题讨论】：

这里是不同服务器上的相同代码并且工作正常：jakearchibald.com/scratch/alphavid
相同的代码我的本地系统无法正常工作，你能帮我解决这个问题吗？

标签： javascript html css canvas html5-canvas

【解决方案1】：

这里的主要问题是 CORS 或跨域资源共享。如果视频是从与页面不同的服务器加载的，则将其视为跨域。

此外，一些浏览器会将从 file:// 加载的任何内容视为跨域。

提取像素时，必须满足 CORS。这意味着视频是从与页面相同的来源（通常是服务器）加载的。在您的情况下，您可能可以将视频下载到本地磁盘，以便从与测试页面相同的位置加载它们。

或者，托管视频的服务器允许跨域使用，这里不是这种情况，所以这不是一个选项。替代方法是找到允许使用 CORS 的主机或 CDN。

您还必须通过设置本地服务器或使用带有内置服务器（WebStorm、Visual Studio 等）的 IDE 来确保您的页面是从 localhost (127.0.0.1) 加载的。

【讨论】：

如何获取 getImageData()。 ?
@Vicky 您在代码/小提琴中使用它 :) 问题主要是 CORS，如果您使用 file:// 在本地加载它，它被视为不同的来源。您必须使用本地服务器加载它（和视频），以便您可以从 localhost 启动页面和视频
@Vicky 这里有更多关于 cors 的信息：en.wikipedia.org/wiki/Cross-origin_resource_sharing

【解决方案2】：

有一个crossorigin 属性或<video> 标记应该可以克服CORS 问题（see HTML docs），尽管它在您的小提琴示例中对我不起作用。

另一种选择是安装 AMP 堆栈并通过 localhost:// 访问您的网站 - 无法通过 file:// 工作的代码是多个库中的常见问题。

【讨论】：

【解决方案3】：

我得到了解决方案，我们需要在 localhost 或服务器上运行这个 html。

【讨论】：