Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Video poster does not display on iPhone/iPad


I'm using version 5.3 of the JW Player. When viewing the HTML5 player on the iPhone or Ipad the video posters do not display, the area is black with the video icon. The video does play though without any issues. Scroll down to the bottom video on this page and view it on the iPhone/iPad to see what I mean: http://www.ghostpool.com/dev/1/shortcodes/video-shortcodes

I've tried removing the source tags and adding the video URL directly to the video tag. I've also tried different image URLs in case TimThumb was causing an issue. In both cases the problem still occurs. This is the code I'm using:

bc.. <video id="video-'.$video_name.'" width="'.$width.'" height="'.$height.'" poster="'.get_bloginfo('template_directory') .'/lib/scripts/timthumb.php?src='.$image.'&h='.$height.'&w='.$width.'&zc=1" controls="controls">

<source src="'.$html5_1.'" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />
<source src="'.$html5_1.'" type="video/webm" type=\'video/webm; codecs="vp8, vorbis"\' />
<source src="'.$html5_2.'" type="video/ogg" source src="'.$ogg.'" type=\'video/ogg; codecs="theora, vorbis"\' />

</video>

<script>
jwplayer("video-'.$video_name.'").setup({
file: "'.$url.'",
image: "'.get_bloginfo('template_directory') .'/lib/scripts/timthumb.php?src='.$image.'&h='.$height.'&w='.$width.'&zc=1",
icons: "'.$icons.'",
autostart: "'.$autostart.'",
stretching: "'.$stretching.'",
controlbar: "'.$controlbar.'",
skin: "'.$skin.'",
screencolor: "white",
height: '.$height.',
width: '.$width.',
players: [';
if($priority == "html5") {
$out .= '{type: "html5"}, {type: "flash", src: "'.get_bloginfo("template_directory").'/lib/scripts/mediaplayer/player.swf"}';
} elseif($priority == "flash") {
$out .= '{type: "flash", src: "'.get_bloginfo("template_directory").'/lib/scripts/mediaplayer/player.swf"}, { type: "html5" },';
}
$out .= ']
});
</script>';

16 Community Answers

JW Player

User  
0 rated :

I've noticed that the html5 player is not actually displaying a blank screen but the first frame of the video- so if you re-edit your video to begin with a single "poster" frame you'll have the effect of the poster frame. It's an annoying workaround but it'll work until Apple fixes this iOS issue. Please let us know when/if this gets fixed Longtail. Thanks!

JW Player

User  
0 rated :

Video JS player supports poster on video tag using js on ipad.

JW Player

User  
0 rated :

if you find any workaround the please let me know also

Ethan Feldman

JW Player Support Agent  
0 rated :

@Moin – Do you have a link to this player? Also, you can use the “image” flashvar, and the image should load.

JW Player

User  
0 rated :

Well, it is like iOS 5 now on the devices and the player still does not show a preview image in HTML5 mode.
Is there anything I need to add to the traditional code?

Ethan Feldman

JW Player Support Agent  
0 rated :

You need to add the “image” variable. Do you have a link to where it is not working ?

JW Player

User  
0 rated :

Thank you for reply, Ethan.
Sure, I have this variable set.
It works fine in Flash mode, but does not show up in HTML5 (it does not show in a Chrome HTML5, too).

http://carrottopstudios.com/temp/content/videoshow/videoid/6

Ethan Feldman

JW Player Support Agent  
0 rated :

You are mixing absolute and relative links here, they should all be absolute. Also, your site can be accessed with and without ‘www’, meaning your site does not have 301 redirects set up.

JW Player

User  
0 rated :

Thank you for reply, Ethan.
I will try more changing this.
Thanks for help.

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Andrew

JW Player Support Agent  
0 rated :

Hi

Sorry to jump in on this thread, but I am having the same problem,

Link http://www.test.atthebench.com/handbrake_new

On the New Ipad and iphone the cover image does not show up at the start of the video but shows up at the end.

I am using this

file=[s3mv]handbrake_new.mp4,url[/s3mv] image=http://www.test.atthebench.com/wp-content/uploads/2012/09/ring.jpg][/video]

I did see somethin saying that a piece of code could be added to start the film for 1 frame and then pause it. This would be an ideal situation as I always add 0.2sec of a still image at the beginning of all my films because I used to use FlowPlayer. If this is the case what is that piece of code and where do I add it bearing in mind I am using the jwplayer.

Andrew

Ethan Feldman

JW Player Support Agent  
0 rated :

What plugin for WP are you using?

Andrew

JW Player Support Agent  
0 rated :

its the jw player for wordpress

Andrew

Ethan Feldman

JW Player Support Agent  
0 rated :

Why do you have [video] shortcodes around the [jwplayer] shortcode?

Andrew

JW Player Support Agent  
0 rated :

to have control over the placement of the videos on the video page templates

Andrew

Ethan Feldman

JW Player Support Agent  
0 rated :

What happens if you just use our shortcode, nothing else?

This question has received the maximum number of answers.