【问题标题】: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 属性或&lt;video&gt; 标记应该可以克服CORS 问题(see HTML docs),尽管它在您的小提琴示例中对我不起作用。

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

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多