HTML5 воспроизводит шаги и код реализации видео и динамического экрана (поддерживает другие непроверенные сафари)

Комментарий: HTML5 воспроизводит видео и динамические скриншоты, очень модную и классную функцию, в настоящее время не поддерживает Chrom, поддерживает другие непроверенные сафари. Если вам нужно знать, пожалуйста, обратитесь к этому соответствующим образом

Сначала обратитесь к адресу jQuery. Выберите Сину

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

Добавить видеоте

<видео Controls = "Controls">

<источник src = "1.mp4" />

</video>

Тогда JS

<script type = "text/javascript">

$ (). ready (function () {

var video, output;

VAR Scale = 0,25;

var initiaze = function () {

output = $ ("#output");

video = $ ("#видео"). get (0);

$ ("#Capture"). Click (captuctionImage);

};

var captuctionImage = function () {

var canvas = document.createElement ("canvas");

canvas.width = video.videowidth * Scale;

canvas.height = video.videoheight * Scale;

canvas.getContext ('2d')

.drawimage (видео, 0, 0, Canvas.width, Canvas.height);

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

img.src = canvas.todataurl ();

output.prepend (img);

};

$ (инициализировать);

});

</script>

Я не буду публиковать визуализации.