Ответ 1
Чтобы скопировать видеокадр в файл изображения, необходимо правильно загрузить видео, скопировать изображение на холст и экспортировать его в файл. Это вполне возможно, но есть несколько мест, где вы можете столкнуться с проблемами, поэтому давайте сделаем это шаг за шагом.
1) Загрузка видео
Чтобы захватить пиксели, вам нужно загрузить видео в тег <video>, а не iframe или object или embed. И файл должен поступать с веб-сервера, который является тем же самым, что и сама веб-страница (если вы не используете заголовки с перекрестными заголовками, который является сложным и может не работать в вашем браузере. Это запрещено браузером по соображениям безопасности. Ваш код загружает видео из локальной файловой системы, что не будет работать.
Вам также нужно загрузить нужный формат файла. IE9 + может проигрывать WMV, но маловероятно, что любой другой браузер будет. Если вы можете, загрузите несколько источников, используя webm, mp4 и идеально ogg/theora.
var container = document.getElementById("myVid"),
video = document.createElement('video'),
canCapture = true;
if (!video.canPlayType('video/wmv')) {
/* If you don't have multiple sources, you can load up a Flash fallback here
(like jPlayer), but you won't be able to capture frames */
canCapture = false;
return;
}
video.src = 'myvideo.wmv';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls
2) Затем создайте холст и контекст рисования. Вам не нужно даже прикреплять его к DOM, но вам нужно установить его на тот размер, в котором вы хотите сохранить результирующее изображение. В этом примере мы предположим, что у вас есть фиксированное измерение, но если вы хотите, вы можете установить его на несколько размеров видео. Просто убедитесь, что вы запустили это внутри события "загруженные метаданные" на видео, поскольку размеры видео не будут доступны сразу.
var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.
3) Захват изображения на холст и сохранение его в файл. Поместите этот код в событие onclick на кнопку или внутри таймера - однако вы хотите решить, когда изображение будет захвачено. Используйте метод drawImage. ([Эта статья] дает хорошее объяснение, включая проблемы безопасности. Это то же самое для видео, что и для изображения.)
//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'
4) Экспорт файла изображения
Теперь файл jpg сохраняется как URI данных, который представляет собой длинную строку javascript, представляющую кодированную версию полного двоичного файла. Это зависит от вас, что с ним делать. Вы можете поместить его непосредственно в элемент img, просто установив его в src: myImage.src = dataUri;.
Если вы хотите сохранить его в файл, вам очень нужно загрузить его на сервер. Вот хороший учебник о том, как это сделать.
Как обычно, все вышеперечисленное ограничено браузерами, которые его поддерживают. Если вы собираетесь использовать wmv-видео, вы в значительной степени ограничены Internet Explorer 9+. 6-8 не поддерживают ни теги видео, ни холст. Если вы можете добавить больше видеоформатов, вы можете использовать Firefox (3.5+) и Chrome.