Question

我试图在这里做点什么是网址：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>

Answer 1

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

此外，某些浏览器会将从file：//加载的任何内容视为跨源。

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

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

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

Answer 2

crossorigin标记有一个<video>属性可以克服CORS问题（see HTML docs），虽然它对你的小提琴例子没有用处。

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

Answer 3

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

我可以使用HTML5视频标签获得具有透明背景的mp4视频吗？

3 个答案: