집 >웹 프론트엔드 >H5 튜토리얼 >캔버스와 h5로 비디오 스크린샷 기능을 구현하는 방법

캔버스와 h5로 비디오 스크린샷 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-03-26 11:59:073013검색

이번에는 캔버스와 h5로 동영상스크린샷 기능을 구현하는 방법을 보여드리겠습니다. 캔버스와 h5로 동영상 스크린샷 기능을 구현할 때 사용할 수 있는 주의사항은 무엇입니까? 봐.

이 기간 동안 캔버스를 공부하다가 문득 영상의 스크린샷을 찍고 그 사진을 뽑아서 이모티콘을 만드는 기능을 만들어볼까 하는 생각이 들었어요, 하하하하하하~~

제작 방법:

1. 페이지 동영상 로드

캔버스를 사용하여 이 스크린샷 기능을 만들 때 먼저 동영상이 페이지에 로드되어 있는지 확인해야 편리하게 조작할 수 있습니다.

<video loop controls id="testmp4" width="500" height="400" >    
<source src="test.mp4" type="video/mp4">  
<source src="test.webm" type="video/webm">   
<source src="test.ogg" type="video/ogg">
</video>

내 기사 "html5 및 비디오"에서 언급한 바에 따르면 브라우저는 비디오 사전 로드 진행률 및 로드 이벤트에 대해 서로 다른 지원을 제공하며 이는 다른 비디오의 재생 및 트리거링에 영향을 미칩니다. 이벤트. 그래서 여기서는 js를 사용하여 비디오를 소개하는 비디오를 구성합니다.

이런 방식으로 동영상을 소개할 때는 주의하세요. 여러 소스를 소개할 수 없으므로 먼저 브라우저의 동영상 형식 지원 여부를 확인해야 합니다.

1.1 비디오의 canPlayType() 메서드를 사용하여 지원되는 형식을 결정합니다.

canPlayType() 메서드는 비디오 형식인 매개 변수를 전달해야 합니다.

공통 값: video/ogg ;

　　video/mp4 video/webm; codec="vp8.0, vorbis"

반환 값: 웹 페이지의 지원 수준을 나타냅니다: "아마도" - 지원될 가능성이 가장 높음(입력 시 이 값만 반환됨) 값에는 인코더가 있음), "아마도" - 지원될 수 있음, "" - (빈

문자열

)은 지원되지 않음

function videoType(video){
    var returnType='';
    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){
    　　returnType= 'mp4';
    }else if(video.canPlayType('video/ogg')=='probably'||video.canPlayType('video/ogg')=='maybe'){<br> 　　　　returnType= 'ogg'; 　　 <br>　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){<br> 　　　　returnType= 'webm'; 　　 <br>　　 }<br>　　 return returnType; 
}

이 함수는 비디오에 대해 브라우저에서 지원되는 형식을 결정할 수 있습니다.

1.2 js를 사용하여 비디오 태그를 동적으로 로드

브라우저의 지원되는 형식을 확인한 후, 저는 크롬을 사용하고 있기 때문에 내 브라우저는 mp4 형식의 비디오를 지원하고 그런 다음 동적으로 비디오 태그를 생성합니다.

var videoElem;
var videop;
function createVideo(){
     videoElem=document.createElement("video");//创建video
     videop=document.getElementById("videopanel");//获取video的外层容器
     videop.appendChild(videoElem);
     var vtype=videoType(videoElem);//判断浏览器支持的格式
     if(vtype==""){
        videop.innerHtml('不支持video')
    }else{
        videoElem.setAttribute('src',"text."+vtype);
    }
}

여기서는 스크린샷 기능을 만들고 싶기 때문에 간단한 영상에는 스크린샷 인터페이스가 없어서 캔버스에 복사해서 캔버스에서 영상을 재생해야 하므로 여기서는 먼저 영상을 숨깁니다(

display

: 없음). 2. 캔버스를 사용하여 비디오 복사

비디오가 브라우저에서 재생되었으므로 먼저 캔버스를 만든 다음 캔버스 컨텍스트를 가져옵니다. 여기에 자세히 설명되어 있습니다. 캔버스에 비디오를 그리는 방법, 여기서는 함수를 사용해야 합니다. drawImage 함수 사용법 1.drawImage(img,x,y): 캔버스의 위치(x, y)에 img를 그립니다.

2.drawImage(img,x,y,width,height): 그리기 캔버스에 img 너비와 높이가 있는 img를 (x, y)에 그립니다. 3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height): at (x,y); canvas ) 위치의 (sx, sy) 위치에 img의 너비와 높이를 스크린샷으로 그려서 캔버스에 너비와 높이만큼 그려줍니다. 위는 drawImage의 사용법입니다. 이 기능은 매우 강력합니다.

스크린샷 촬영으로 돌아가서 이제 브라우저에 캔버스(contextVideo)를 만든 다음 여기에 비디오를 그립니다.

contextVideo.drawImage(videoElem,0,0);

그러면 캔버스에 그림이 그려지는 것을 볼 수 있지만 비디오는 끊임없이 변화하고 있습니다. , 그래서 영상을 계속해서 소스로 사용하여 그림을 그리려면 setInterval 함수를 사용해야 합니다.

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100)

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

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

3. 캔버스 패널을 표시하기 위한 스크린샷 만들기

여기서 페이지에 또 다른 캔버스(contextImg)를 그린 다음 drawImage 메서드를 다시 사용하여 스크린샷을 찍어야 합니다.

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height);

这段代码将第一个canvas画到了第二个canvas上。

4.制作截图按钮

制作一个按钮，然后绑定click事件，点击后就调用上一步的函数，这样就可以制作一个截图了。

当图截好后可以将图右键保存下来，然后倒入ps制作表情包了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

캔버스와 h5로 비디오 스크린샷 기능을 구현하는 방법

관련 기사