Canvas drawImage в Chrome

Мне нужно изменить цвет фона, чтобы он соответствовал цвету видео в строке 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] + ")";
};
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я предполагаю, что есть какая-то проблема с синхронизацией, когда 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

Другие вопросы по теме