Add a preview image to an S3/Cloudfront Video

I am struggling trying to add an image to act as a preview image to show prior to the start of the video. Thankfully the video plays just fine but is black at startup. I’d love to have a preview image there. I know that the jwplayer asks for:

image ( undefined )
Location of a preview (poster) image; shown in display before the video starts.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options

But when I try to add this to the code below it won’t seem to show up. I have tried lots of variations on this like

$s2_jw_config[“image”] = “testimage.jpg”; //

But it is a no go. I’ve tried calling the image from s3 or calling it from the jwplayer directory and nothing seems to work. I am guessing that there is a simple way to do this that my non-coding brain is just missing.

Thanks for any help with this.

Echo

<?php
// Configuration.
$s2_jw_config["jwplayer"] = "/jwplayer/"; // Relative URL path to JW Player files directory.
$s2_jw_config["mp4_video_file_name"] = "video.mp4"; // Name of your MP4 test file.
// Don't edit anything else below unless you know what you're doing.
?>

<div id="jw-container">JW Player® appears here.</div>
<script type="text/javascript" src="<?php echo $s2_jw_config["jwplayer"]; ?>jwplayer.js"></script>

<?php /* A direct URL to the RTMP source; counting the file against the current User in real-time. */
$cfg = array ("file_download" => $s2_jw_config["mp4_video_file_name"], "url_to_storage_source" => true, "count_against_user" => true); ?>

<?php /* API Function `s2member_file_download_url()` returns false if access is denied to the current User. */
if (($mp4 = s2member_file_download_url ($cfg, "get-streamer-array"))) { ?>

    <script type="text/javascript">
        jwplayer("jw-container").setup({modes: /* JW Player®. */
        [
            /* First try real-time streaming with Flash® player. */
            {type: "flash", provider: "rtmp", src: "<?php echo $s2_jw_config["jwplayer"]; ?>player.swf",
                config: {streamer: "<?php echo $mp4["streamer"]; ?>", file: "<?php echo $mp4["file"]; ?>"}},
        
            /* Else, try an HTML5 video tag. */
            {type: "html5", provider: "video",
                config: {file: "<?php echo $mp4["url"]; ?>"}},
        
            /* Else, this is a safe fallback. */
            {type: "download", /* Download the file. */
                config: {file: "<?php echo $mp4["url"]; ?>"}}
        ],
        /* Set video dimensions. */ width: 640, height: 360
        });
    </script>

<?php } else /* Access is denied to the current User. */ { ?>
    Sorry, you do NOT have access to this file.
<?php } ?>

Sorry to ask a question and then not need a response….but since I posted this question I have solved my dilemma. I realized that Philly’s excellent shortcode for making a S3/Cloudfront video playlist could easily be configured to run a single video and omit the playlist. Since it makes it simple to configure a preview image the problem is solved. It works great and I can avoid that code altogether.

For anyone interested you can find Philly’s playlist shortcode here:

http://www.s2member.com/forums/topic/trouble-streaming-a-jwplayer-playlist/

It has helped me over and over. Thanks again Philly!

Echo

• This reply was modified 4 years, 4 months ago by  Echomango.

Thank you for the update, Echo! Glad to hear you figured it out. :)

Thanks Echo,

If its not to late for you to change things a little you might consider this extended version of the video shortcodes plugin which is easier and has lots more options