Как создать эскиз с помощью видео url для jquery jplayer

Question

Мне нужно создать, чтобы показать уменьшенное изображение на плакате с помощью видеоролика для jquery j-player.i искать в forum.but, я не получил никакой полезной информации связанные с thumbnail.anyone может дать мне некоторые идеи, чтобы сделать это ..
Благодаря Advance ..

$("#jquery_jplayer_2"+playid).jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
      /*m4v: "media/tokyo.m4v", 
      ogv: "media/tokyo.ogv", 
      poster: "media/poster.jpg"*/ 
      m4v: playpath, 
      ogv: playpath, 
      poster: playpath 
     }); 
    }, 
    ended: function (event) { 
     $("#jquery_jplayer_2"+playid).jPlayer("play", 0); 
    }, 
    swfPath: "swf", 
    supplied: "m4v, ogv", 
    cssSelectorAncestor: "#jp_interface_2" 
}) 
.bind($.jPlayer.event.play, function() { // pause other instances of player when current one play 
     $(this).jPlayer("pauseOthers"); 
    }); 

Answer 1

Вы можете создать новый холст для захвата изображения:

var canvas = document.createElement('canvas'); 
canvas.width = 640; 
canvas.height = 480; 
var context = canvas.getContext('2d'); 
context.drawImage(video, 0, 0, canvas.width, canvas.height); 

, а затем сохранить Это в dataURI:

var dataURI = canvas.toDataURL('image/jpeg'); 

здесь вы можете использовать его в качестве элемента изображения, сохранить его в виде файла или загрузить его на сервер:

$('img1').attr("src", dataURI); 

Посмотрите на this plunker. Запустите видео и нажмите кнопку GET. Обратите внимание на то, что, поскольку видео исходит из другого домена я должен был установить атрибут на видеоэлементе crossOrigin в jplayer ready события:

$(this).find("video")[0].setAttribute("crossOrigin", "anonymous");