Search code examples
javascriptjwplayer

JwPlayer - Show video screenshot before playing


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!


Solution

  • Looks like the snapshot plugin may be what you're looking for.