The poster image is working fine when a jpg has been uploaded, but not if it was generated from the video. Does the format or source change?
Code:
var playerInstance = jwplayer("myElement-example");
playerInstance.setup({
file: "//content.jwplatform.com/videos/example.mp3",
image:"http://content.jwplatform.com/thumbs/example.jpg",
stretching:"fill",
mediaid: "mediaIdhere"
});
I would expect all of the thumbnails that we generate to be .jpg.
What is the media ID of the video where this is not the case?
Hi,
On further discovery I've found this issue isn't isolated to previews generated from the video but uploads as well.
For sound files the preview images are fine, for videos they load then there is a flash and you'll get the first frame of the video instead.
I've created an example: http://test.progress-review.co.uk/audio-test.php
Code:
<h3>Media ID A5Hvz2Ak - Video file</h3>
<div style="width:500px; margin-bottom:30px;">
<div id="myElement3" style="position:relative; padding-bottom:56.25%; overflow:hidden;"></div>
</div>
<script type="text/javaScript">
var playerInstance = jwplayer("myElement3");
playerInstance.setup({
file: "//content.jwplatform.com/videos/A5Hvz2Ak.mp3",
image:"http://content.jwplatform.com/thumbs/A5Hvz2Ak.jpg",
stretching:"uniform",
mediaid: "A5Hvz2Ak"
});
</script>
<br><br>
<h3>Media ID vjJR6tsQ - Sound file</h3>
<div style="width:500px; margin-bottom:30px;">
<div id="myElement2" style="position:relative; padding-bottom:56.25%; overflow:hidden;"></div>
</div>
<script type="text/javaScript">
var playerInstance = jwplayer("myElement2");
playerInstance.setup({
file: "//content.jwplatform.com/videos/vjJR6tsQ.mp3",
image:"http://content.jwplatform.com/thumbs/vjJR6tsQ.jpg",
stretching:"uniform",
mediaid: "vjJR6tsQ"
});
</script>
Our thumbnail URLs require a width, so http://assets-jpcust.jwpsrv.com/thumbs/A5Hvz2Ak-320.jpg will work.
The possible widths match those of the existing transcode templates, so usually -320, -480, -640, -720, -1280, and -1920. Please see our documentation at https://developer.jwplayer.com/jw-platform/docs/delivery-api-reference/#!/poster_images/get_thumbs_media_id_thumb_width_jpg for more details.
Hi,
Adding the width to the image path doesn't make a difference. The audio example never had a width and it works.
I've now updated the video example here: http://test.progress-review.co.uk/audio-test.php to
<script type="text/javaScript">
var playerInstance = jwplayer("myElement3");
playerInstance.setup({
file: "//content.jwplatform.com/videos/A5Hvz2Ak.mp3",
image:"http://assets-jpcust.jwpsrv.com/thumbs/A5Hvz2Ak-640.jpg",
stretching:"uniform",
mediaid: "A5Hvz2Ak"
});
</script>
It's still loading the image and then the video (with the first frame) over the top. If I play with your CSS by adding a z-index to the background image I can get it to appear.
Sorry, I did not realize I had the wrong URL in my previous post. You should use:
//content.jwplatform.com/thumbs/[mediaID]-[width].jpg
This is strange. From what I can see, your [mediaID].mp3 file does not actually exist and is returning a 302 redirect to an MP4. If I link to an audio-only file that returns a 200, then the poster image remains on the player.
I will need to escalate this to our Player team to understand why the player is doing this, and I also want to send an escalation to our Media Services team to find out why the audio-only URLs are returning the 302 redirects. I will update this thread when I have more details.
Upon further inspection, the audio-only source created for any upload uses a slightly different URL template:
//content.jwplatform.com/videos/[mediaID]-[transcodeID].m4a
I have verified that if you use this correct URL in the player, the poster image does not disappear. You can find this URL for any video in the Sources tab of the Video Details page. Just click on the little Links down arrow to reveal the URL in your dashboard.
Hope this helps,
Todd
