如何使用jquery jplayer的視頻網址創建縮略圖

Question

我需要創建在海報中顯示縮略圖圖像使用視頻網址為jquery j-player.i尋找在論壇。但我沒有任何有用的信息與thumbnail.anyone可以給我一些想法來做到這一點..
謝謝提前..

$("#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);

看看這個plunker 。 啟動視頻，然后按GET按鈕。 請注意，由於視頻來自另一個域，我必須在jplayer ready事件中的視頻元素上設置crossOrigin屬性：

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