Can I have a mp4 video with transparent background using HTML5 video tag?

Question

i have tried to do something here is url : check this link in myh local system i can't see video. atleast jsfidlle is show video.

<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

The main problem here is CORS or cross-origin resource sharing. If the video is loaded from a different server than the page, it is considered cross-origin.

Also, some browsers will consider anything loaded from file:// as cross-origin.

When pixels are extracted CORS must be fulfilled. This means either that the video is loaded from the same origin (usually server) as the page. In your case you can probably download the videos to your local disc so they are loaded from the same place as your test page.

Or, the server hosting the videos allows cross-origin use, this is not the case here so that is not an option. Alternative would be to find a host or CDN which allows CORS usage.

You must also make sure your page is loaded from localhost (127.0.0.1) by setting up a local server or use an IDE with a built-in one (WebStorm, Visual Studio etc.).

Answer 2

There is a crossorigin attribute vor the <video> tag that should overcome the CORS problematic ( see HTML docs ), though it didn't work for me on your fiddle example.

Another option would be, to install an AMP stack and access your site via localhost:// – code not working via file:// is a common problem on several libraries.

Answer 3

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