Jquery fancybox中的jwplayer不能在ipad/iphone上播放

我正在使用以下代码，但视频无法在iOS（ipad/iphone）上的fancybox中使用jwplayer播放…否则效果很好。我很感激iOS不处理flash，但我不确定如何修改此代码以提供html5回退

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

$（文档）.ready（函数（）{
$（“.video\u popup”）.fancybox({
fitToView:false，//以自己的大小显示视频
内容：“”，//创建临时内容
滚动：“否”，//不在fancybox中显示滚动条
后加载：函数（）{
//从数据属性获取维度
var$width=$（this.element）.data（'width'）；
var$height=$（this.element）.data（'height'）；
//替换临时内容
此参数为：content=“”；
}
});

iOS仅支持通过HTTP协议进行视频流传输，而Flash可以使用RTMP。有关如何使用HTML5回退解决方案配置JWPlayer的配置示例，请参阅

但是，您需要注意以下几行：

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

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

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

当然，您的流媒体服务器也必须支持HTTP流媒体

---

编辑

为了在fancybox中设置JWPlayer，您可以像往常一样使用这些方法。将fancybox和JWPlayer一起使用没有什么特别的

HTML

---

在w4rumy的帮助下，我成功地让jwplayer使用html5在fancybox中工作，因此在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'}},
    ]
    });
  }
});

$（文档）.ready（函数（）{
$（“.video\u popup”）.fancybox({
菲托维：错，
滚动：“否”，
内容：“”，
余辉：函数（）{
jwplayer（'myvideo'）。设置({
文件：this.href，
自动启动：“true”，
模式：[
{type:'flash'，src:'scripts/jwplayer6/jwplayer.flash.swf'}，
{type:'html5'，config:{file:this.href，provider:'video'}，
]
});
}
});

您使用哪种协议进行流式传输（RTMP、HTTP等）？您的fancybox中是否存在id为手风琴的

？我想问题在于我在fancybox中使用jwplayer，而不是使用jwplayer.js来嵌入，因此我没有备用选项…那么，为什么不在fancybox打开后使用jwplayer.js来嵌入播放器？您需要这样做来设置配置合适。谢谢，你有我应该怎么做的例子吗？在我的回答中增加了一个例子。谢谢你对这个w4rumy的帮助…但我似乎在倒退，fancy box现在甚至没有显示出来…我已经用我现在使用的代码编辑了我的OP。唯一的问题是，在ipad上，autostart不起作用，因为苹果决定禁用它safari…此外，视频似乎覆盖在它的顶部，触摸播放按钮会使fancybox消失。。。

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

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