CODEWITHSUNDEEP
phpjavascripthtmljwplayer
Pengume
Pengume

Reputation: 570

JW player black screen for IPAD

I am embedding my videos with JW player http://www.longtailvideo.com/players/ and I have a problem with the videos not playing on Ipad or Iphone pretty much i think the HTML5 video tag. The video is just black. Code to embed the div

 <div id="jwplayer-1"></div>     
 <script type="text/javascript">
        jwplayer('jwplayer-1').setup(
{"flashplayer":"<?php echo $jwplayer_folder; ?>/player.swf",
"width":"550",
"height":"500",
"controlbar":"bottom",
"icons":"true","playlist.position":"none","playlistsize":"180","repeat":"none",
"shuffle":"false","bufferlength":"1",
"smoothing":"true",
"stretching":"uniform",
"wmode":"opaque",
"mute":"false",
"volume":"90",
"skin":"<?php echo $jwplayer_folder; ?>/skins/whotube.zip",
"dock":"false",
"autostart":"false",
"file":"http://www.longtailvideo.com/jw/upload/bunny.mp4",
"image":"<?php echo $image_slug; ?>",
});
</script>

Everything works fine on the flash end it plays the video on any normal browser but on the ipad the video well not play. I know it is not encoding issue or anything because i use this code right under the video and it works...

  <video width="320" height="240" controls="controls">
<source src="<?php echo $video_slug ?>" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

Any thoughts or ideas as I have tried everything I think it is probably the way i am seting up the JW player on the setup method?

Thanks!

Upvotes: 0

Views: 3632

Answers (1)

Eswar Rajesh Pinapala
Eswar Rajesh Pinapala

Reputation: 4911

Ok I understand your problem now,

The below code seems to work on iPad/iPhone , Working Demo Here

This method supports Flash Fallback as well, But mainly plays HTML5 Video(Provided that Video has no encoding issues.)

You can now Use Php to dynamically load image,video,jw folder names etc. If you want to completely get rid of flash support, remove
{ type: 'flash', src:'http://player.longtailvideo.com/player.swf'} from the modes node!

<script src="http://player.longtailvideo.com/jwplayer.js" type="text/javascript"></script>    

<p><div id="exampleHTML"></div></p>

<script type="text/javascript">
jwplayer('exampleHTML').setup({
    height: 360,
    image: "http://content.bitsontherun.com/thumbs/bkaovAYt-720.jpg",
    levels: [
        { file: "http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4", type:"video/mp4" },
        { file: "http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm", type:"video/webm" }
    ],
    modes: [
        { type: 'html5' },
        { type: 'flash',  src:'http://player.longtailvideo.com/player.swf'}
    ],
    width: 640
});
</script>​

Screenshot of Video Playing on iPad: enter image description here Also keep in mind that there are limitations with jw HTML5 Player, You can find them here

Upvotes: 1

Related Questions