캔버스 및 HTML5 비디오 스크린 샷 기능 예제의 구현

이 기간 동안 나는 캔버스를 공부하고 있습니다.

방법 만들기 :

캔버스를 사용 하여이 스크린 샷 기능을 만들 때 먼저 페이지가로드되어 완료되었는지 확인하여 쉽게 작동 할 수 있습니다. 바로 아래의 <video> 레이블을 사용하는 경우 :

 <비디오 루프 컨트롤 ID = testmp4 너비 = 500 높이 = 400> <소스 src = test.mp4 type = video/mp4> <소스 src = test.webm type/webm> <sour ce src = test.ogg type = video/ OGG> </video>

내 "HTML5 및 비디오"에서 브라우저는 비디오의 사전로드 된 진행 및로드 이벤트를 지원하여 비디오의 재생 및 기타 이벤트에 영향을 미칩니다. 따라서 우리는 JS를 사용하여 비디오를 제작하여 비디오를 소개합니다.

이런 식으로 비디오 도입에주의를 기울여야합니다. 여러 소스를 소개 할 수 없으므로 먼저 브라우저의 비디오 형식에 대한 지원을 판단해야합니다.

canplayType () 메소드는 매개 변수를 전달해야 하며이 매개 변수는 비디오 형식입니다.

일반적으로 사용되는 값 : 비디오/OGG;

비디오/mp4;

비디오/웹;

또는 인코더 포함 :

비디오/ogg; 코덱 = theora, vorbis

비디오/MP4; 코덱 = AVC1.4D401E, MP4A.40.2

비디오/웹; Codesc = vp8.0, vorbis

반환 값 : 웹 페이지의 지원 수준을 나타냅니다. 아마도 -입력 값이 인코더와 함께있을 때만 반환 할 가능성이 높습니다.

 함수 비디오 타입 (비디오) {var return = ''; 'mp4';} else if (video.canplaytype ( 'video/ogg') == '아마도'|| video.canplaytype ( 'video/oogg') == 'mayge') {<br> retunty pe = 'ogg '; Webm '; <br> returntype;}.

이 기능은 브라우저의 비디오 지원 형식을 결정할 수 있습니다.

Chrome을 사용하기 때문에 브라우저의 지원 형식을 판단한 후 브라우저는 MP4 형식 비디오를 지원 한 다음 비디오 태그를 동적으로 만듭니다.

 viceElem; videodiv; 비디오 타입 (videoelem); // 브라우저 지원 형식을 결정합니다.

여기서 스크린 샷 기능을 만들고 싶으므로 간단한 비디오에는 스크린 샷 인터페이스가 없으므로 캔버스에 복사하여 캔버스 에서이 비디오를 방송해야하므로 먼저 비디오를 숨기려고 숨겨져 있습니다 (표시 : 없음).

이제 브라우저에서 비디오가 재생되었습니다. 캔버스에 복사하고 먼저 캔버스를 구축 한 다음 캔버스 컨텍스트를 얻습니다. 캔버스에 비디오를 그리는 방법, 여기서는 기능을 사용해야합니다. DrawImage 기능 사용

1. DrawImage (IMG, X, Y) : 캔버스 위치 (X, Y) 위치에 IMG를 그립니다.

2. DrawImage (img, x, y, 너비, 높이) : 높이, 높이가 높은 너비 너비의 IMG를 그립니다.

3. DrawImage (IMG, SX, SY, SWIDTHT, SHEIGHT, X, Y, 폭 Sheight 스크린 샷, 캔버스를 너비와 높이로 끌어 올리십시오.

위는 DrawImage의 사용법입니다.

스크린 샷으로 돌아가서 이제 브라우저 -ContextVideo에서 캔버스를 만들었고 여기에 비디오를 그립니다.

 ContextVideo.DrawImage (VideoElem, 0,0);

그런 다음 캔버스에서 그림을 볼 수 있지만 비디오는 끊임없이 변화하고 있으므로 SetInterval 함수를 사용하여 소스로 계속 그리기 위해야합니다.

 setInterval (function () {<br> contextvideo, drawImage (VideoElem, 0,0); <br>}, 100)

여기서 시간 간격의 크기는 비디오 재생이 카드인지 여부에 영향을 미칩니다.

이 시점에서 우리는 비디오를 캔버스로 옮겼습니다. 다음으로 스크린 샷을 만드십시오.

여기서는 Page-ContextImg에 Canvas Canvas를 그린 다음 DrawImage 메소드를 사용하여 스크린 샷을 다시 가져와야합니다.

 ContextImg.DrawImage (Canvasvideo, 0,0, Canvasvideo.width, canvasvideo.height);

이 코드는 두 번째 캔버스에 첫 번째 캔버스를 그립니다.

버튼을 작성한 다음 클릭 후 클릭 한 후 이전 기능을 호출하여 스크린 샷을 만들 수 있습니다.

그래프가 잘라면 오른쪽 버튼을 저장 한 다음 PS에 부어 이모티콘을 만들 수 있습니다.

위는이 기사의 모든 내용입니다.