javascript - how to create thumbnail image by using video url for jquery jplayer - Stack Overflow

admin管理员组

文章数量:1410682

i need create to show thumbnail image in poster by using video url for jquery j-player.i have seek in forum.but i didn't got any useful information related to thumbnail.anyone can give me some ideas to do it..
Thanks 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");
    });

i need create to show thumbnail image in poster by using video url for jquery j-player.i have seek in forum.but i didn't got any useful information related to thumbnail.anyone can give me some ideas to do it..
Thanks 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");
    });

• javascript
• jquery
• jplayer

Share Follow edited Mar 4, 2015 at 4:34 Udaya Ravi asked Mar 3, 2015 at 14:54 Udaya RaviUdaya Ravi 19733 gold badges33 silver badges1414 bronze badges 2

• you need to assign image on poster: "media/poster.jpg"*/ image path.. – Anant Dabhi Commented Mar 4, 2015 at 4:37
• i know that bro..but that's not my issue, how to create thumbnail for poster from video – Udaya Ravi Commented Mar 4, 2015 at 4:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can create a new canvas to capture the image:

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);

and then save it to dataURI:

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

From here you can use it in an image element, save it as a file or upload it to your server:

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

Take a look at this plunker. Start the video and press the GET button. Notice that since the video is ing from another domain I had to set the crossOrigin attribute on the video element in the jplayer ready event:

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

本文标签： javascripthow to create thumbnail image by using video url for jquery jplayerStack Overflow