Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Обработка видео с помощью canvas

.

Обработка видео с помощью canvas

Мы можем слегка модифицировать код, написанный нами для конвертации цветных изображений в черно-белые, так, чтобы он мог работать не только со статичными картаинками, но и с видеофайлами. Это позволит нам сделать видеоролик на заглавной странице HTML5 Herald более соответствующим стилю старой газеты. Мы запишем этот скрипт в отдельный файл videoToBW.js, а затем включим его в наш сайт.

Начинается файл, как и всегда, с создания холста и контекста:

Обработка видео с помощью canvas

Обработка видео с помощью canvas

Затем мы добавим слушатель событий, чтобы он перехватил момент начала воспроизведения видеоролика. Мы хотим вызвать функцию draw, когда воспроизводится видео:

Обработка видео с помощью canvas

В начале воспроизведения видео вызывается функция draw, и ей в качестве аргумента передаются объекты video, context и canvas. Мы используем анонимную функцию, а не нормальную, поименованную, потому что ей нужно передавать параметры, которых мы пока не знаем (они получаются из обработчика событий).

Давайте рассмотри функцию draw:

Обработка видео с помощью canvas

Прежде чем сделать что-либо еще, мы проверяем, не находится ли ролик в состоянии паузы или не остановлен ли он; в этом случае функция просто возвращает false. Если все нормально, следует вызов функции drawOneFrame.

Код этой функции почти идентичен тому, который мы разобрали в предыдущем примере при превращении цветных изображений в черно-белые, с той разницей, что операция производится не со статичным изображением, а с элементом video:

Обработка видео с помощью canvas

Что произойдет после того, как один кадр перерисован? Обрабатываем следующий!

Метод setTimeout дает нам возможность снова и снова без пауз вызывать функцию draw: параметр final — значение задержки, т.е. как долго, в миллисекундах, браузер должен ожидать, прежде чем снова вызвать функцию. Поскольку значение задержки равно 0, обработка кадров будет происходить практически непрерывно. Это будет продолжаться до тех пор, пока видео не закончится или не будет приостановлено:

Обработка видео с помощью canvas

Результат? Паш цветной видеоролик со взлетающим самолетом re-перь стад черно-белым!

.

Читайте так же:
Not found