如何通过使用视频URL为jQuery jPlayer创建缩略图图像

Question

我需要通过使用视频链接在jquery j-player中创建显示缩略图图像的海报。我在论坛上寻找过，但没有得到与缩略图相关的有用信息。是否有人能给我一些实现的想法？
提前感谢。

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

- Udaya Ravi

---

你需要将图片路径指定给poster: "media/poster.jpg"来安排图片。 - Anant Dabhi

我知道兄弟，但那不是我的问题，我该如何从视频中创建海报缩略图。 - Udaya Ravi

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 事件中设置 video 元素上的 crossOrigin 属性：

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

- eladcon