[英]how to create thumbnail image by using video url for jquery jplayer
我需要创建在海报中显示缩略图图像使用视频网址为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");
});
您可以创建一个新画布来捕获图像:
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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.