일반 비디오 웹 사이트는 사용자가 업로드 한 사용자가 재생하는 비디오의 스크린 샷을 찍을 수 있습니다. 이 기능은 프로젝트에 도입되어 사용자가 추가 디스플레이 다이어그램을 업로드하지 않고 사용자에게 좋은 경험을 제공 할 수 있습니다.
효과지도 :
여전히 좋아 보인다. 아래에서 분석하자.
_canvas = _canvas.todaurl (image/png);
핵심 코드는이 라인입니다. 그것이 핵심 요점입니다.
전체 예를 살펴 보겠습니다.
HTML :
<! 블록 : 60px Auto 0; 5px; a auto; type = text/javaScript src = ../../../jquery -.8.3.js> </script> <text/javaScript src = videoshot.js> </scri text/javaScript> $ (function () {Zhanghongyang.click2shot.init ();});HTML과 CSS는 모두 매우 간단합니다.
주로 JS 코드에 따라 다릅니다.
/ ** * Zhy * 날짜 : 12:24 AM * 파일 템플릿 .click2shot = (function () {var _id_video = video; var _id_shotbar = shotbar; var _videowidth = 0; var _videoheight = 0; var_canvas = null; tx = null; var _video = null; function _init () {_canvas = 문서. CreateElement (_ctx.getContext); 오 이이트); eowidth ); $ (# + _id_shotbar) .click (_click2shot); _videoheight) var datall = _canvas.todaurl (vary var $ imgbig = $) : _video.offsetLect : _video.offsetTop : _videowidth + px : _videowidth + px}; $ (<Img>); $ img 애니메이션 효과 $ imgbig.animate ({왼쪽 : 공식 .x + px, 상단 : 공식 + px, 너비 : $ img.width () + px, 높이 : $ img.height () + px}, 200, function () {$ img.attr (src, dataurl) .show (); _video.play ();}); x : (번호 | 번호), y : (번호 | 번호)} * @priving */ function_getOffset (ele m) {var pos = {x : elem.offsetleft, y : elem.offsetTop}; {pos.x += pareatleft.Video.Canplay 이벤트에서 속성 및 일부 작업을 얻은 후에는 removeEventlinStener를 반드시해야합니다. 그렇지 않으면이 메소드가 항상 호출됩니다. 사건을 클릭하면 비디오가 일시 중단 된 다음 jQuery 애니메이션을 사용하여 썸네일 위치로 이동합니다.
사진을 얻은 후에는 직접 추가 할 수 있습니다. 또한 매우 중요한 점이 있습니다. 캔버스. Todataurl (image/png); 보안 문제
위는이 기사의 모든 내용입니다.