Teilen eines Beispiels für ein Canvas-Videomasken-Plug-in

Fügen Sie einem Video ein Overlay hinzu, um einen bestimmten Bereich des Videos zu blockieren. Während eines bestimmten Zeitraums des Videos, z. B. der 10. bis 20. Minute, wird der abgegrenzte Bereich nicht angezeigt. Zu den Anwendungsszenarien gehören das Blockieren von Satelliten-TV-Symbolen, das Blockieren von Werbung in der unteren rechten Ecke von Videos, die Funktion als Mosaik usw. In diesem Artikel wird hauptsächlich das auf Canvas basierende Videomasken-Plugin vorgestellt und ausführlich beschrieben, wie man einem Video ein Cover hinzufügt. Ich hoffe, dass es hilfreich ist alle.

Ein langes Video kann mehrere Masken enthalten. Jede Maske hat eine bestimmte Anzeigezeit (außerhalb dieser Zeit ist die Maske ausgeblendet).

Front-End-Implementierung der Videomaskierung

Es gibt zwei technische Lösungen, die auf p und auf Canvas basieren. Dieser Artikel wird mit Canvas vervollständigt.

Das Hauptprinzip besteht darin, eine transparente Canvas-Ebene an das HTML-Video-Tag anzuhängen und dann auf Mousedown-, Mousemove- und Mouseup-Ereignisse zu reagieren. Da das Canvas-Ereignis nur auf dem Canvas-Element basiert, muss die Ereignisantwort jedes Elements innerhalb des Canvas (ein Rechteck, ein Kreis usw.) in Ihrem eigenen Code mithilfe von Koordinaten vervollständigt werden.

Plug-in-GitHub-Adresse

https://github.com/cunzaizhuyi/maskPlugin

Demo-Adresse
http://htmlpreview .github .io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

Funktionspunkte implementiert

1. Maske zeichnen (Rechteck)

2. Maskenstil festlegen (stellt API bereit)

3. Maskenbewegung

4. Maskenskalierung

5. Mausstiltransformation auf Leinwand

Gekapselte API

名称	值类型	说明
1、矩形相关设置
fillStyle	颜色值	矩形填充色, 默认为'#eeeeee'
strokeStyle	颜色值	矩形边界线颜色, 默认为'#0000ff'
inRectCursor	字符串	当鼠标处于某个小矩形内部时鼠标样式，默认为'move'。可以设置为'pointer'之类的。
2、矩形边界上的八个小矩形 相关设置
bRectsStrokeStyle	颜色值	矩形边界上的小矩形的颜色，默认为'#0000ff'
bSideLength	number	矩形边界上小矩形的边长值，默认为6
3、遮罩时间相关
masksTime		每个遮罩的开始显示时间和结束显示时间，一个遮罩对应一个矩形

MaskenZeitbeispiel:

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]

Endlich

Dies basiert auf nativer Leinwand The Little Plug-in mit mehr als 700 Zeilen ist möglicherweise erst der Anfang für die Erkundung der Welt der Leinwand.

Verwandte Empfehlungen:

Beispielfreigabe einer jQuery-Implementierung der mit IE6 kompatiblen Maskierungsfunktion

So verhindern Sie, dass die Seite nach dem Scrollen scrollt Beispiel für eine Maskenebene

JS-Codebeispiel zum Implementieren des Maskeneffekts durch Platzieren der Maus auf dem Bild

Das obige ist der detaillierte Inhalt vonTeilen eines Beispiels für ein Canvas-Videomasken-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!