相关疑难解决方法(0)

我写了一个简单的脚本,从视频中取出一个帧并将其绘制到画布上.我的问题是视频和绘制图像之间的颜色正在变化.

我把结果放在原件旁边,以便更容易看到.原来的是在左边.它似乎在Chrome浏览器btw上更加明显.我在OSX上所做的所有测试.

这里有一个片段,左边是画布,右边是视频:

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});

html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>

我想知道为什么会发生这种情况,如果有可能以跨浏览器的方式摆脱它？

这里写的简单脚本:

let video = document.querySelector('#my-video') …

我有一个大问题。我自己制作了一个应用程序演示视频，并使用了我想要的背景颜色。

现在我想在 HTML5 播放器中播放它。一切正常，但现在，当我在 Chrome、Safari 和 Firefox 上仔细观看我的视频时。我可以看到颜色与我制作的原始视频不完全相同。我无法理解这一点。我还尝试将这段视频上传到 Youtube 上，并将框架放在我的网站上。一样的。看起来每个视频都没有显示正确的颜色。

一个例子 ：

左边是红色背景的原始视频 (#FF6666)，右边是 Google Chrome 上的视频（红色已从#FF6666 变为 #F3566A !!）在 Safari 上，情况相同，但使用了这个颜色：#FC7474

出了什么问题？有人能帮我吗 ？

谢谢，

安托万

我正在使用HTML5视频标签在我的网站上播放一段简短视频:

<video width="100%" poster="/images/video_preview.jpg">
    <source src="/images/movie.mp4" type="video/mp4">
    <source src="/images/movie.webm" type="video/webm">
    Your browser does not support HTML5 video.
</video>

视频显示但是当我在谷歌浏览器的网站上时,颜色看起来有点紫色,然后它们应该是,并且在Internet Explorer上整个视频看起来更暗.我也有一个预览图像,你可以在我的代码中看到,该图像现在是一种不同的颜色,然后在浏览器上显示,这不是我想要的.我注意到例如Apple也使用了<video>标签,但它们在浏览器之间没有色差.

这怎么可能？我对所有浏览器使用相同的代码.这是因为所有浏览器的渲染？

我怎样才能解决这个问题？谢谢.

加上BOUNTY

有没有人在浏览器中遇到与视频呈现相同的问题,可以帮我解决这个问题吗？仍然没有弄清楚为什么相同的视频文件在Internet Explorer中显示为较暗而在Google Chrome中显示为紫色.

该页面在线,因此您可以在此处查看其中的差异.