JwPlayer - 播放前显示视频截图

Question

我一直没能找到任何关于这个的东西，所以也许有人可以帮我一把

我想要做的是当 JwPlayer 加载时，而不是它当前显示的默认黑屏，我希望它显示它设置播放的视频中的帧

以下是我用来加载 JwPlayer 的 HTML 和 JS 片段

<div id="video">
</div>

<script type="text/javascript" language="javascript">
        jwplayer("video").setup({ 
            height: 300,
            width: 620,
        autostart: false,
        volume: 50,
        file: "/video.mp4",
            modes: [
        {
                type: "html5",
                config: {
                    file: "/video.mp4"
                }
            },
        {
                type: "flash",
                src: "/player.swf"
            },
        {
                type: "download"
            }]
        }); 

</script>

请注意，我没有将其设置为自动启动，因此加载时它只显示黑屏，黑屏上覆盖有播放按钮

我知道如何让它在设置功能中显示图像而不是带有图像属性的黑屏，但这需要我从视频中手动生成图像并将其上传到服务器。 我需要它能够根据视频动态执行

我查看了 JWPlayer 文档但找不到任何东西，所以也许它甚至不可能做到，但希望这里有人比我更了解

谢谢！

Answer 1

看起来快照插件可能正是您要找的。

Answer 2

我意识到这个问题已经得到回答并被接受，但是，一个选项是启动播放器并立即暂停它。 这对我有用：

onReady: function () {
    $this = this;
    this.play(); 
    var pauseMe = window.setTimeout(this.pause, 500); // sets auto poster
    ...
}

当然，这仅在您想显示视频的第一帧左右时才有效； 抓取视频中其他任何地方的特定帧可能会与 seekTo() 一起使用，然后播放和暂停，但您可能会遇到缓冲延迟。 实际上，我现在需要从视频的后面抓取图像，因此可能会尝试使用该图像或 ffmpeg :)

Answer 3

在设置中只需添加“图像”

jwplayer("myDiv").setup({
  "file": "http://example.com/myVideo.mp4",
  "image": "http://example.com/myImage.png",
  "height": 360,
  "width": 640
});