jwplayer in fancybox not playing on ipad/iphone

问题

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>"; 
    }
  });

回答1:

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
    });
  }
});

回答2:

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'}},
    ]
    });
  }
});

来源：https://stackoverflow.com/questions/14846926/jwplayer-in-fancybox-not-playing-on-ipad-iphone

标签

jquery

fancybox

jwplayer