我可以使用 HTML5 視頻標簽制作具有透明背景的 mp4 視頻嗎？

Question

我試圖在這里做一些 url ：在 myh 本地系統中檢查此鏈接我看不到視頻。 至少 jsfdllle 是展示視頻。

<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

<video>標簽有一個crossorigin屬性，它應該可以克服 CORS 問題（ 請參閱 HTML 文檔），盡管它在您的小提琴示例中對我不起作用。

另一種選擇是，安裝 AMP 堆棧並通過localhost://訪問您的站點——代碼無法通過file://是幾個庫的常見問題。

Answer 3

我得到了解決方案，我們需要在本地主機或服務器上運行這個 html。