Partage d’exemples de plug-in de masque vidéo Canvas

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. Cet article présente principalement en détail le plug-in de masque vidéo basé sur Canvas et explique en détail comment ajouter une couverture à une vidéo. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer. tout le monde.

Une longue vidéo peut contenir plusieurs masques, chaque masque a une durée d'affichage spécifique (en dehors de cette durée, le masque est masqué).

Implémentation frontale du masquage vidéo

Il existe deux solutions techniques basées sur p et basées sur Canvas Cet article est complété à l'aide de 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-in

https://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

1. Dessiner un masque (rectangle)

2. Définir le style du masque (fournit une API)

3. Mouvement du masque

4. Mise à l'échelle du masque

5. Transformation du style souris sur toile

API encapsulée

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

Exemple MasksTime :

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

Enfin

Ceci est basé sur la toile native Le petit Ce plug-in de plus de 700 lignes n'est peut-être qu'un début pour explorer le monde du canevas.

Recommandations associées :

Exemple de partage de l'implémentation jQuery de la fonction de masquage compatible avec IE6

Comment empêcher la page de défiler après le Exemple de calque de masque

Exemple de code JS pour implémenter l'effet de masque en plaçant la souris sur l'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!