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.
Ein langes Video kann mehrere Masken enthalten, wobei jede Maske eine bestimmte Anzeigezeit hat (außerhalb dieser Zeit ist die Maske ausgeblendet).
Frontend-Implementierung der VideomaskierungEs gibt zwei technische Lösungen, die auf Div und Canvas basieren. Dieser Artikel wird mit Canvas vervollständigt.
Das Hauptprinzip besteht darin, dem HTML-Video-Tag eine transparente Canvas-Ebene hinzuzufügen 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 der Canvas (ein Rechteck, ein Kreis usw.) durch Ihren eigenen Code unter Verwendung von Koordinaten vervollständigt werden.
Plug-in-GitHub-Adressehttps://github.com/cunzaizhuyi/maskPlugin
Demo-Adresse
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Funktionspunkte implementiertName | Werttyp | veranschaulichen |
---|---|---|
1. Rechteckbezogene Einstellungen | ||
fillStyle | Farbwert | Füllfarbe des Rechtecks, Standard ist „#eeeeee“ |
Strichstil | Farbwert | Farbe der Rechteckrandlinie, Standard ist „#0000ff“. |
inRectCursor | Zeichenfolge | Mausstil, wenn sich die Maus innerhalb eines kleinen Rechtecks befindet. Die Standardeinstellung ist „Verschieben“. Kann auf „Zeiger“ oder ähnliches gesetzt werden. |
2. Verwandte Einstellungen für acht kleine Rechtecke an der rechteckigen Grenze | ||
bRectsStrokeStyle | Farbwert | Die Farbe des kleinen Rechtecks am rechteckigen Rand, Standard ist „#0000ff“. |
bSideLength | Nummer | Der Seitenlängenwert des kleinen Rechtecks an der rechteckigen Grenze, der Standardwert ist 6 |
3. Maskierungszeitbezogen | ||
maskenZeit | Die Start- und Endanzeigezeit jeder Maske entspricht einem Rechteck |
[{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}]endlich
Dieses kleine Plug-in mit mehr als 700 Zeilen basierend auf nativem Canvas ist möglicherweise nur der Anfang, um die Welt des Canvas zu erkunden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.