Предлагаю немного поэкспериментировать с видео тегами в 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