Agregue una superposición a un video para bloquear un área determinada del video. Durante un período de tiempo determinado del video, como del minuto 10 al 20, el área delimitada no se mostrará. Los escenarios de aplicación incluyen bloquear íconos de televisión satelital, bloquear anuncios en la esquina inferior derecha de videos, actuar como mosaicos, etc.
Un vídeo largo puede contener varias máscaras, cada una de las cuales tiene un tiempo de visualización específico (fuera del cual la máscara está oculta).
Implementación front-end de enmascaramiento de video.Hay dos soluciones técnicas basadas en div y basadas en lienzo. Este artículo se completa con lienzo.
El principio fundamental es adjuntar una capa de lienzo transparente a la etiqueta de video HTML y luego responder a los eventos mousedown, mousemove y mouseup. Dado que el evento del lienzo solo se basa en el elemento del lienzo, la respuesta del evento de cada elemento dentro del lienzo (un rectángulo, un círculo, etc.) debe completarse con su propio código usando coordenadas.
Dirección de GitHub del complementohttps://github.com/cunzaizhuyi/maskPlugin
Dirección de demostración
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Puntos de función implementados| nombre | tipo de valor | ilustrar |
|---|---|---|
| 1. Configuraciones relacionadas con el rectángulo | ||
| llenarEstilo | valor de color | Color de relleno del rectángulo, el valor predeterminado es '#eeeeee' |
| estilo de trazo | valor de color | Color de la línea del borde del rectángulo, el valor predeterminado es '#0000ff' |
| inRectCursor | cadena | Estilo del mouse cuando el mouse está dentro de un rectángulo pequeño. El valor predeterminado es "mover". Se puede configurar como "puntero" o algo así. |
| 2. Configuraciones relacionadas para ocho pequeños rectángulos en el límite rectangular | ||
| bRectsStrokeStyle | valor de color | El color del pequeño rectángulo en el borde rectangular, el valor predeterminado es '#0000ff' |
| bLongitudLado | número | El valor de la longitud del lado del rectángulo pequeño en el límite rectangular, el valor predeterminado es 6 |
| 3. Relacionado con el tiempo de enmascaramiento | ||
| máscarasTiempo | El tiempo de inicio y fin de visualización de cada máscara, una máscara corresponde a un rectángulo |
[{maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] por finEste pequeño complemento con más de 700 líneas basado en lienzos nativos puede ser solo el comienzo para explorar el mundo del lienzo.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.