Ajoutez une superposition à une vidéo pour bloquer une certaine zone de la vidéo Pendant une certaine période de temps de la vidéo, comme la 10e à la 20e minute, la zone délimitée ne sera pas affichée. Les scénarios d'application incluent le blocage des icônes de télévision par satellite, le blocage des publicités dans le coin inférieur droit des vidéos, le fonctionnement de mosaïques, etc.
Une longue vidéo peut contenir plusieurs masques, chaque masque ayant une durée d'affichage spécifique (en dehors de laquelle le masque est masqué).
Implémentation frontale du masquage vidéoIl existe deux solutions techniques basées sur div et basées sur Canvas. Cet article est réalisé en utilisant Canvas.
Le principe principal est d'attacher un calque de canevas transparent à la balise vidéo HTML, puis de répondre aux événements mousedown, mousemove et mouseup. Étant donné que l'événement canevas est uniquement basé sur l'élément canevas, la réponse événementielle de chaque élément à l'intérieur du canevas (un rectangle, un cercle, etc.) doit être complétée par votre propre code à l'aide de coordonnées.
Adresse GitHub du plug-inhttps://github.com/cunzaizhuyi/maskPlugin
Adresse de démonstration
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Points de fonction implémentés| nom | type de valeur | illustrer |
|---|---|---|
| 1. Paramètres liés au rectangle | ||
| Style de remplissage | valeur de couleur | Couleur de remplissage du rectangle, la valeur par défaut est « #eeeeee » |
| style de trait | valeur de couleur | Couleur de la bordure du rectangle, la valeur par défaut est « #0000ff » |
| inRectCurseur | chaîne | Style de souris lorsque la souris est à l'intérieur d'un petit rectangle. La valeur par défaut est « déplacer ». Peut être réglé sur « pointeur » ou quelque chose comme ça. |
| 2. Paramètres associés pour huit petits rectangles sur la limite rectangulaire | ||
| bRectsStrokeStyle | valeur de couleur | La couleur du petit rectangle sur la bordure rectangulaire, la valeur par défaut est '#0000ff' |
| bCôtéLongueur | nombre | La valeur de longueur du côté du petit rectangle sur la limite rectangulaire, la valeur par défaut est 6 |
| 3. Temps de masquage lié | ||
| masquesTime | L'heure d'affichage de début et l'heure d'affichage de fin de chaque masque, un masque correspond à un rectangle |
[{ maskId : 1, startTime : 0, endTime : 10,}, {maskId : 2, startTime : 3, endTime : 13,}] enfinCe petit plug-in de plus de 700 lignes basé sur Canvas natif n’est peut-être qu’un début pour explorer le monde de Canvas.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.