fancybox中的jwplayer无法在ipad/iphone上播放 [英] jwplayer in fancybox not playing on ipad/iphone

问题描述

我正在使用以下代码，但视频无法在iOS(ipad/iphone)上的fancybox内与jwplayer一起播放...否则工作正常.我赞赏iOS无法处理Flash，但不确定如何修改此代码以提供html5后备广告...

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

推荐答案

iOS仅支持通过HTTP协议进行视频流传输，不像Flash中您可以使用RTMP.可以在

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'

如前所述，iOS仅支持通过HTTP进行流传输，因此您将需要以下内容:

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'

当然，您的流服务器也必须支持通过HTTP的流.

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

编辑

为了在fancybox中设置JWPlayer，您可以照常使用这些方法.一起使用Fancybox和JWPlayer并没有什么特别的.

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(根据您的问题改编)

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

这篇关于fancybox中的jwplayer无法在ipad/iphone上播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！