영상에 오버레이를 추가해 영상의 특정 영역을 차단합니다. 10분~20분 등 영상의 특정 시간 동안은 구분된 영역이 표시되지 않습니다. 적용 시나리오에는 위성 TV 아이콘 차단, 비디오 오른쪽 하단의 광고 차단, 모자이크 역할 등이 포함됩니다.
긴 비디오에는 여러 개의 마스크가 포함될 수 있으며, 각 마스크에는 특정 표시 시간이 있습니다(이 시간 이외의 시간에는 마스크가 숨겨짐).
비디오 마스킹의 프런트엔드 구현div 기반과 캔버스 기반의 두 가지 기술 솔루션이 있습니다. 이 기사는 캔버스를 사용하여 완성되었습니다.
주요 원칙은 투명한 캔버스 레이어를 HTML 비디오 태그에 첨부한 다음 mousedown, mousemove 및 mouseup 이벤트에 응답하는 것입니다. 캔버스 이벤트는 캔버스 요소만을 기반으로 하기 때문에 캔버스 내부의 각 요소(사각형, 원 등)의 이벤트 응답은 좌표를 사용하는 자체 코드로 완성되어야 합니다.
플러그인 GitHub 주소https://github.com/cunzaizhuyi/maskPlugin
데모 주소
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
기능 점수 구현| 이름 | 값 유형 | 설명하다 |
|---|---|---|
| 1. 직사각형 관련 설정 | ||
| 채우기 스타일 | 색상 값 | 직사각형 채우기 색상, 기본값은 '#eeeeee'입니다. |
| 스트로크스타일 | 색상 값 | 직사각형 테두리 선 색상, 기본값은 '#0000ff' |
| inRectCursor | 끈 | 마우스가 작은 직사각형 안에 있을 때의 마우스 스타일 기본값은 '이동'입니다. '포인터' 또는 이와 유사한 것으로 설정할 수 있습니다. |
| 2. 직사각형 경계에 있는 8개의 작은 직사각형에 대한 관련 설정 | ||
| bRectsStrokeStyle | 색상 값 | 직사각형 테두리에 있는 작은 직사각형의 색상, 기본값은 '#0000ff'입니다. |
| b측면 길이 | 숫자 | 직사각형 경계에 있는 작은 직사각형의 측면 길이 값, 기본값은 6입니다. |
| 3. 마스킹 시간 관련 | ||
| 시간 마스크 | 각 마스크의 시작 표시 시간과 종료 표시 시간, 하나의 마스크는 직사각형에 해당합니다. |
[{maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] 마침내기본 캔버스를 기반으로 700개 이상의 줄이 포함된 이 작은 플러그인은 캔버스 세계를 탐험하기 위한 시작에 불과할 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.