HTML5는 비디오 및 동적 스크린 샷 구현 단계 및 코드를 재생합니다 (다른 테스트되지 않은 사파리 지원)

댓글 : HTML5는 매우 세련되고 멋진 기능인 비디오와 동적 스크린 샷을 재생합니다. 현재 크롬을 지원하지 않으며 다른 테스트되지 않은 사파리를 지원합니다. 알아야 할 경우 적절하게 참조하십시오.

먼저 jQuery 주소를 참조하십시오. 시나를 선택하십시오

<script type = "text/javaScript"src = "http://lib.sinaapp.com/js/jquery/1.6/jquery.js"> </script>

비디오 태그를 추가하십시오

<video controls = "controls">

<소스 src = "1.mp4" />

</video>

그런 다음 js

<script type = "text/javaScript">

$ (). ready (function () {

VAR 비디오, 출력;

var 스케일 = 0.25;

var initialize = function () {

output = $ ( "#output");

video = $ ( "#video"). get (0);

$ ( "#capture"). 클릭 (captureImage);

};

var captureImage = function () {

var canvas = document.createElement ( "캔버스");

canvas.width = video.videowidth * scale;

Canvas.height = video.videoheight * 스케일;

canvas.getContext ( '2d')

.DrawImage (Video, 0, 0, Canvas.width, canvas.height);

var img = document.createElement ( "IMG");

img.src = canvas.todataurl ();

output.prepend (IMG);

};

$ (초기화);

});

</스크립트>

렌더링을 게시하지 않을 것입니다.