Adicione uma sobreposição a um vídeo para bloquear uma determinada área do vídeo. Durante um determinado período de tempo do vídeo, como do 10º ao 20º minuto, a área delimitada não será exibida. Os cenários de aplicação incluem o bloqueio de ícones de TV via satélite, bloqueio de anúncios no canto inferior direito dos vídeos, atuação como mosaicos, etc.
Um vídeo longo pode conter múltiplas máscaras, cada máscara tendo um tempo de exibição específico (fora do qual a máscara fica oculta).
Implementação front-end de mascaramento de vídeoExistem duas soluções técnicas baseadas em div e baseadas em canvas. Este artigo é concluído usando canvas.
O princípio principal é anexar uma camada de tela transparente à tag de vídeo HTML e, em seguida, responder aos eventos mousedown, mousemove e mouseup. Como o evento canvas é baseado apenas no elemento canvas, a resposta do evento de cada elemento dentro do canvas (um retângulo, um círculo, etc.) deve ser completada pelo seu próprio código usando coordenadas.
Endereço GitHub do plug-inhttps://github.com/cunzaizhuyi/maskPlugin
Endereço de demonstração
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Pontos de função implementados| nome | tipo de valor | ilustrar |
|---|---|---|
| 1. Configurações relacionadas ao retângulo | ||
| estilo de preenchimento | valor da cor | Cor de preenchimento do retângulo, o padrão é '#eeeeee' |
| estiloAVC | valor da cor | Cor da linha da borda do retângulo, o padrão é '#0000ff' |
| inRectCursor | corda | Estilo do mouse quando o mouse está dentro de um pequeno retângulo. O padrão é 'mover'. Pode ser definido como 'ponteiro' ou algo parecido. |
| 2. Configurações relacionadas para oito pequenos retângulos na borda retangular | ||
| bRectsStrokeStyle | valor da cor | A cor do pequeno retângulo na borda retangular, o padrão é '#0000ff' |
| bComprimento lateral | número | O valor do comprimento lateral do pequeno retângulo no limite retangular, o padrão é 6 |
| 3. Tempo de mascaramento relacionado | ||
| máscarasTime | O horário de início e término de exibição de cada máscara, uma máscara corresponde a um retângulo |
[{maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] afinalEste pequeno plug-in com mais de 700 linhas baseado em canvas nativo pode ser apenas o começo para explorar o mundo do canvas.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.