HTML5: размещение холста на видео с элементами управления

Question

Я хочу рисовать вещи на HTML5 видео. Для этого я пытаюсь поместить холст в элемент видео HTML5.

Но есть проблема, когда я помещаю холст на элемент видео, элементы управления видео не работают. Начиная с холста, получая все мыши и события клика. Есть ли способ делегировать события элементам управления видео или показать элементы управления в другом месте?

Любая помощь / идея была бы отличной.

Answer 1

Что вы должны сделать, это реализовать свои собственные элементы управления (или использовать существующий набор, такой как videojs )
Вы можете прочитать мой ответ на этот вопрос: Архитектура наложения видео Html5

Answer 2

Вы можете захватить события щелчка на холсте и рассчитать их положение.Исходя из этого, вы можете приблизительно определить, какой элемент управления был выбран, и сделать так, чтобы видео изменило вас.
Я имею в виду что-то вроде этого:

canvas.onclick = function(e){
    if(isOverPauseBtn(e))
        video.pause();
    //.. and so on
}

Answer 3

Увеличение z-индекса холста.z-index=10 Подведите видео под холст.Высота холста = высота всего видео - высота элементов управления видео.

Вы можете покрыть только видео часть холстом, а при наведении на нижнюю часть холста вы получите элементы управления