Мне нужно изменить цвет фона, чтобы он соответствовал цвету видео в строке Wordpress. Работает в firefox\edge\safari Но не работает в хроме. Возвращает RGB (0,0,0)
страница с проблемой - http://flex.tmweb.ru
window.onload = function() {
var vid = document.getElementById('video-15-1_html5');
var row = document.getElementById('globe-video');
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
var context = canvas.getContext('2d');
context.drawImage(vid, 0, 0, 1, 1);
var p = context.getImageData(0, 0, 1, 1).data;
row.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
};



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я предполагаю, что есть какая-то проблема с синхронизацией, когда Chrome отличается от других браузеров с точки зрения того, когда он вызывает загрузку, а не когда само видео что-либо загружает.
Попробуйте проверить, загрузилось ли видео, прежде чем приступить к работе с холстом, а затем, если необходимо, подождите:
function onVideoLoaded() {
var vid = document.getElementById('video-15-1_html5');
var row = document.getElementById('globe-video');
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
var context = canvas.getContext('2d');
context.drawImage(vid, 0, 0, 1, 1);
var p = context.getImageData(0, 0, 1, 1).data;
row.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
}
window.onload = function() {
var vid = document.getElementById('video-15-1_html5');
if (vid.readyState === 4) {
onVideoLoaded();
} else {
vid.addEventListener('loadeddata', function () {
if (vid.readyState === 4) {
onVideoLoaded();
}
});
}
};
См. эту документацию MDN на HTMLMediaElement.readyState: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState