javascript - 如何使用 jquery jplayer 的视频 url 创建缩略图

Question

我需要通过使用 jquery j-player 的视频 url 在海报中显示缩略图。我在论坛中搜索过。但我没有得到任何与缩略图相关的有用信息。任何人都可以给我一些想法去做..
提前谢谢..

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

您可以创建一个新的 Canvas 来捕获图像:

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 按钮。请注意，由于视频来自另一个域，我必须在 jplayer ready 事件中的视频元素上设置 crossOrigin 属性:

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