JwPlayer - Show video screenshot before playing

Question

I haven't been able to find anything on this so maybe someone can give me a hand

What I'm trying to do is when the JwPlayer loads, instead of the default black screen it currently shows, I'd like it to show a frame from the video it's set to play

The following is the snippet of HTML and JS I use to load the JwPlayer

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

Note that I don't have it set to autostart, so on load it just shows a black screen with a play button overlayed on the black screen

I know how to make it show an image instead of the black screen with an image attribute in the setup function, but that requires me to manually generate an image from the video and upload it to a server. I need it to be able to do it dynamically depending on the video

I looked at the JWPlayer documentation but couldn't find anything, so perhaps its not possible to even do, but was hoping maybe someone here knows better than I do

Thanks!

Answer 1

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

Answer 2

I realize this question has been answered and accepted, however, an option would be to start the player and pause it immediately. This worked for me:

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

This only works of course if you want to show the first frame or so of your video; grabbing a specific frame anywhere else in the video might work with seekTo(), and then play and pause, but you would likely get buffering delays. I actually now need to grab an image from later in the video so will likely be trying that or ffmpeg :)

Answer 3

In the setup just add the "image"

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