jwplayer in fancybox not playing on ipad/iphone

Question

I'm using the following code but videos won't play with jwplayer inside fancybox on iOS (ipad/iphone)...works fine otherwise. I appreciate that iOS doesn't handle flash, but I'm unsure of how to modify this code to provide for the html5 fallback...

<script type="text/javascript" src="scripts/jwplayer/html5/jwplayer.html5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".video_popup").fancybox({
    fitToView: false, // to show videos in their own size
    content: '<span></span>', // create temp content
    scrolling: 'no', // don't show scrolling bars in fancybox
    afterLoad: function () {
      // get dimensions from data attributes
      var $width = $(this.element).data('width'); 
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='scripts/jwplayer/player.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });

Which protocol are you using for streaming (RTMP, HTTP, ...)? — Uooo, Feb 13 '13 at 05:37

Uooo · Answer 1 · 2013-02-13T07:00:35.487

2

iOS only supports video streaming over the HTTP protocol, unlike Flash where you can use RTMP. A configuration example how to configure JWPlayer using a HTML5 fallback solution can be found in the documentation.

However, you need to keep care of these lines:

'provider': 'rtmp',
'streamer': 'rtmp://rtmp.example.com/application',
'file': 'sintel.mp4'

As said, iOS only supports streaming over HTTP, so you would need something like:

'provider': 'http',
'streamer': 'http://rtmp.example.com/application',
'file': 'sintel.mp4'

Of course your streaming server must support streaming over HTTP as well.

EDIT

In order to setup your JWPlayer in fancybox you can use the methods as usual. There is nothing special using Fancybox and JWPlayer together.

HTML

<div class="video_popup">
    <div id="mediaplayer">Here the player will be placed</div>
</div>

Javascript (adapted from your question)

$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, // to show videos in their own size
  scrolling: 'no', // don't show scrolling bars in fancybox
  afterLoad: function () {
    // get dimensions from data attributes
    var $width = $(this.element).data('width'); 
    var $height = $(this.element).data('height');

    // now, use JWPlayer to setup the player instead of embedding Flash
    jwplayer('mediaplayer').setup({
      // configuration code as in the documentation
    });
  }
});

edited Feb 13 '13 at 07:00

answered Feb 13 '13 at 05:45

Uooo

6,204
8
36
63

I guess the problem is that I'm using jwplayer inside fancybox and not using the jwplayer.js to embed, so I don't get the fallback option... – IlludiumPu36 Feb 13 '13 at 06:35
So, why not using the jwplayer.js to embed the player after fancybox was opened? You will need to do this to set up the configuration appropriate. – Uooo Feb 13 '13 at 06:38
Thanks, do you have an example of how I should do this? – IlludiumPu36 Feb 13 '13 at 06:48
Added example in my answer. – Uooo Feb 13 '13 at 07:00
Thanks for your help with this w4rumy...but I seem to be going backwards, fancy box is not even showing now...I have edited my OP with the code that I am now using. – IlludiumPu36 Feb 13 '13 at 08:14
Also, do I need to specify a div when I'm embedding jwplayer into fancybox? The problem is that the content divs are generated dynamically... – IlludiumPu36 Feb 13 '13 at 08:16

score 0 · Answer 2 · answered Feb 14 '13 at 04:29

With help from w4rumy, I have managed to get jwplayer working in fancybox using html5, so plays on ipad/iphone:

<script type="text/javascript" src="scripts/jwplayer6/jwplayer.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, 
  scrolling: 'no', 
  content: '<div id="myvideo"></div>',
  afterShow: function () {
   jwplayer('myvideo').setup({
        file: this.href,
        autostart: 'true',
         modes: [
        {type: 'flash', src: 'scripts/jwplayer6/jwplayer.flash.swf'},
        {type: 'html5', config: {file: this.href, provider: 'video'}},
    ]
    });
  }
});

only thing is that on the ipad, autostart doesn't work as apple decided to disable this on safari... Also, the video seems to have the overlay ontop of it and touching the play button makes fancybox go away... — IlludiumPu36, Feb 14 '13 at 04:32

jwplayer in fancybox not playing on ipad/iphone

2 Answers2

Linked