Возможности видео в HTML 5

HTML5Предлагаю немного поэкспериментировать с видео тегами в html5 (в этом нам поможет замечательная статья на ресурсе www.craftymind.com) и найти некоторые функции которые не очевидны с первого взгляда.

Одна из них это Canvas.drawImage(). Приведу описание с сайта проекта.

Для размещения изображения на подложке страницы можно использовать метод drawImage. Этот метод может быть вызван с тремя различными наборами аргументов.

  • drawImage(image, dx, dy)
  • drawImage(image, dx, dy, dw, dh)
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Функция drawImage() используется разработчиками уже давно и позволяет рисовать заданный объект в заданном месте. Синтаксис:

public function DrawImage(
	image : Image,
	x : float,
	y : float
)

API позволяет взять содержимое определённых html элементов и поместить их на подложку.

При размещении видео с помощью функции drawImage() появляется возможность манипулировать и управлять видео фрагментами в реальном времени.

Приведу два бессмысленных с практической точки зрения, но довольно занятных примера применения API. На первом при щелчке на видео изображении, картинка разлетается на маленькие кусочки. На втором видео отбрасывает тень и вращается (вместе с тенью).

http://craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html