집 > 기사 > 웹 프론트엔드 > 캔버스 비디오 마스크 플러그인 예제 공유

캔버스 비디오 마스크 플러그인 예제 공유

小云云원래의: 2018-01-08 10:35:491773검색

영상에 오버레이를 추가해 영상의 특정 영역(10~20분 등) 동안에는 구분된 영역이 표시되지 않습니다. 적용 시나리오에는 위성 TV 아이콘 차단, 비디오 오른쪽 하단의 광고 차단, 모자이크 역할 등이 포함됩니다. 이번 글에서는 주로 캔버스 기반의 비디오 마스크 플러그인을 자세히 소개하고, 영상에 커버를 추가하는 방법을 자세하게 소개하고 있으니, 필요한 친구들이 참고하면 좋을 것 같습니다. 모든 사람.

긴 동영상에는 여러 개의 마스크가 포함될 수 있으며, 각 마스크에는 특정 표시 시간이 있습니다(이 시간 외에는 마스크가 숨겨집니다).

비디오 마스킹의 프런트 엔드 구현

에는 p 기반과 캔버스 기반의 두 가지 기술 솔루션이 있습니다. 이 기사는 캔버스를 사용하여 완성됩니다.

주요 원칙은 투명한 캔버스 레이어를 HTML 비디오 태그에 첨부한 다음 mousedown, mousemove 및 mouseup 이벤트에 응답하는 것입니다. 캔버스 이벤트는 캔버스 요소만을 기반으로 하기 때문에 캔버스 내부의 각 요소(사각형, 원 등)의 이벤트 응답은 좌표를 사용하여 자체 코드로 완성되어야 합니다.

플러그인 GitHub 주소

https://github.com/cunzaizhuyi/maskPlugin

데모 주소
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/ master/mask/mask.html

기능 포인트 구현

마스크 그리기(직사각형)
마스크 스타일 설정(API 제공)
마스크 이동
마스크 줌
캔버스 마우스 스타일 변환

캡슐화된 API

Name	값 유형	Description
1. 직사각형 관련 설정
fillStyle	색상 값	직사각형 채우기 색상, 기본값은 '#eeeeee'
StrokeStyle	색상 값	사각형 테두리 선 색상, 기본값은 '#0000ff'
inRectCursor	String	마우스가 안에 있을 때의 마우스 스타일 작은 직사각형, 기본값은 '이동'입니다. '포인터' 또는 이와 유사한 것으로 설정할 수 있습니다.
2. 직사각형 경계의 작은 직사각형 8개에 대한 관련 설정
bRectsStrokeStyle	색상 값	사각형 경계의 작은 직사각형 색상, 기본값은 '#0000ff'입니다.
bSideLength	number	직사각형 경계에 있는 작은 직사각형의 변 길이 값, 기본값은 6
3입니다. 마스크 시간 관련
masksTime		The 각 마스크의 시작 표시 시간과 끝 표시 시간, 마스크는 직사각형에 해당합니다

masksTime 예:

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

Finally

이 작은 플러그인은 700개 이상의 라인 기반 네이티브 캔버스에서는 캔버스의 세계를 탐험할 수 있습니다. 시작에 불과합니다.

캔버스 비디오 마스크 플러그인 예제 공유

관련 기사