Как сделать снимок видео-проигрывателя на базе HTML5-JavaScript?

На самом деле, у меня есть страница HTML5 с функцией JavaScript, которая позволяет мне воспроизводить видеофайл wmv. Мне нужно сделать снимок, когда видео воспроизводится (с паузой или без) и сохраняется в любом формате JPG или BMP. Любая помощь будет оценена. Спасибо.

<!DOCTYPE HTML>

    <html>
        <head>
            <title>HTML5 video</title>        
    <script type="text/javascript">
        function checkPlay() {
            var myVideo = document.getElementById("myVid");
            var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>';
            try {
                var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv");
                if ((canPlay == "no") || (canPlay == "")) {
                    myVideo.innerHTML = ytStr;
                }
                new MediaElement(v, { success: function (media) { media.play(); } });
            } catch (err) {
                myVideo.innerHTML = ytStr;
            }
        }
    </script>
        </head>
        <body onload="checkPlay()">
          <div id="myVid"/>

      </body>
    </html>

ОТВЕТЫ

Ответ 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.

Ответ 2

Вы можете взять копию текущего видео и сохранить его в элементе canvas с помощью функции drawImage().

У меня есть полный пример, код которого вы можете просмотреть на скриншот видео/холста, который должен установить вас на правильный трек.

Ответ 3

<html>
<head>
</head>
 <body>

//add video using video tag 
<video controls>
    <source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source>
     </video>
   <canvas id="canvas" width="640" height="480"></canvas>
   <button id="snap" onclick="snap()">Snap Photo</button>
    //start the script   ... within that declare variables as follows...
      <script>
      var video=document.querySelector('video');
      var canvas=document.querySelector('canvas');
      var context=canvas.getContext('2d');
      var w,h,ratio;
    //add loadedmetadata which will helps to identify video attributes......
      video.addEventListener('loadedmetadata',function()
      {
      ratio=video.videoWidth/video.videoHeight;
      w=video.videoWidth-100;
          h=parseInt(w/ratio,10);
      canvas.width=w;
          canvas.height=h;
      },false);
    ///define a function
     function snap()
    {
          context.fillRect(0,0,w,h);
      context.drawImage(video,0,0,w,h);
      }
     </script>


    //stop the script..