2

我尝试在画布中显示视频，但出现此错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

我之所以这样做是因为该视频没有 CORS，但是当我使用test-cors对其进行测试时，我可以看到该视频具有 CORS 定义，因为我得到了响应：

在此处输入图像描述

带有 cors 的网址：

https://res.cloudinary.com/dwaquopnm/video/upload/v1582007937/blink2013_itacxp.mp4

没有 cors 的网址：

http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_2160p_60fps_normal.mp4?fbclid=IwAR0KkYR0f8R0GkJ1UhpDMaVVbOhJ33DEpJ5UhHlz2qwH3ZvPdrS_WTrZMME

我能做些什么来解决这个错误？我不能使用代理，因为我有视频的 CDN。（一台服务器在美国，另一台在中国）所以如果我使用代理我错过了 cdn 点。

document.addEventListener('DOMContentLoaded', function(){
	var v = document.getElementById('my-video');
	var canvas = document.getElementById('c');
	var context = canvas.getContext('2d');
	var back = document.createElement('canvas');
	var backcontext = back.getContext('2d');
 
	var cw,ch;
  
  console.log({ v });
 
	v.addEventListener('play', function(){
		cw = v.clientWidth;
		ch = v.clientHeight;
		canvas.width = cw;
		canvas.height = ch;
		back.width = cw;
		back.height = ch;
		draw(v,context,backcontext,cw,ch);
	},false);
 
},false);

function draw(v,c,bc,w,h) {
  
	if(v.paused || v.ended)	return false;
	// First, draw it into the backing canvas
	bc.drawImage(v,0,0,w,h);
	// Grab the pixel data from the backing canvas
	var idata = bc.getImageData(0,0,w,h);
	var data = idata.data;
	
	idata.data = data;
	// Draw the pixels onto the visible canvas
	c.putImageData(idata,0,0);
	// Start over!
	setTimeout(draw,20,v,c,bc,w,h);
}
#c {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 20px;
}
<head>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="https://res.cloudinary.com/dwaquopnm/video/upload/v1582007937/blink2013_itacxp.mp4" type="video/mp4" crossorign="anonymous" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  
  <canvas id="c" ></canvas> 


  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</body>

4

0 回答 0