Добавьте к видео наложение, чтобы заблокировать определенную область видео. В течение определенного периода времени видео, например с 10 по 20 минуты, ограниченная область не будет отображаться. Сценарии применения включают блокировку значков спутникового телевидения, блокировку рекламы в правом нижнем углу видео, работу в качестве мозаики и т. д.
Длинное видео может содержать несколько масок, каждая из которых имеет определенное время отображения (вне этого времени маска скрыта).
Фронтальная реализация маскировки видеоСуществует два технических решения на основе div и на основе холста. Эта статья завершена с использованием холста.
Основной принцип состоит в том, чтобы прикрепить прозрачный слой холста к HTML-тегу видео, а затем реагировать на события mousedown, mousemove и mouseup. Поскольку событие холста основано только на элементе холста, ответ на событие каждого элемента внутри холста (прямоугольник, круг и т. д.) должен быть дополнен вашим собственным кодом с использованием координат.
Адрес плагина на GitHubhttps://github.com/cunzaizhuyi/maskPlugin
Демо-адрес
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Функциональные точки реализованы| имя | тип значения | иллюстрировать |
|---|---|---|
| 1. Настройки, связанные с прямоугольником | ||
| fillStyle | значение цвета | Цвет заливки прямоугольника, по умолчанию — #eeeeee. |
| стиль штриха | значение цвета | Цвет линии границы прямоугольника, по умолчанию — «#0000ff». |
| inRectCursor | нить | Стиль мыши, когда мышь находится внутри небольшого прямоугольника. По умолчанию используется «перемещение». Можно установить «указатель» или что-то в этом роде. |
| 2. Соответствующие настройки для восьми маленьких прямоугольников на границе прямоугольника. | ||
| bRectsStrokeStyle | значение цвета | Цвет маленького прямоугольника на прямоугольной границе, по умолчанию — «#0000ff». |
| bSideLength | число | Значение длины стороны маленького прямоугольника на границе прямоугольника, значение по умолчанию — 6. |
| 3. Время маскировки | ||
| маскиВремя | Время начала отображения и время окончания отображения каждой маски, одна маска соответствует прямоугольнику. |
[{ MaskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] наконецЭтот небольшой плагин с более чем 700 строками, основанный на собственном холсте, может стать только началом изучения мира холста.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.