jquery - jwplayer in fancybox not playing on ipad/iphone -

jquery - jwplayer in fancybox not playing on ipad/iphone -

i'm using next code videos won't play jwplayer within fancybox on ios (ipad/iphone)...works fine otherwise. appreciate ios doesn't handle flash, i'm unsure of how modify code provide 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, // show videos in own size content: '<span></span>', // create temp content scrolling: 'no', // don't show scrolling bars in fancybox afterload: function () { // dimensions info 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>"; } });

ios supports video streaming on http protocol, unlike flash can utilize rtmp. configuration illustration how configure jwplayer using html5 fallback solution can found in documentation.

however, need maintain care of these lines:

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

as said, ios supports streaming on http, need like:

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

of course of study streaming server must back upwards streaming on http well.

edit

in order setup jwplayer in fancybox can utilize methods usual. there nil special using fancybox , jwplayer together.

html

<div class="video_popup"> <div id="mediaplayer">here player placed</div> </div>

javascript (adapted question)

$(document).ready(function() { $(".video_popup").fancybox({ fittoview: false, // show videos in own size scrolling: 'no', // don't show scrolling bars in fancybox afterload: function () { // dimensions info attributes var $width = $(this.element).data('width'); var $height = $(this.element).data('height'); // now, utilize jwplayer setup player instead of embedding flash jwplayer('mediaplayer').setup({ // configuration code in documentation }); } });

jquery fancybox jwplayer