fancybox + jwplayer（带有 html5 后备）答案

【问题标题】：fancybox + jwplayer (with html5 fallback)fancybox + jwplayer（带有 html5 后备）
【发布时间】：2014-01-30 23:39:03
【问题描述】：

我正在尝试设置 fancybox 来显示视频。我更喜欢播放器，但我试图用 jwplayer 来遵循这个例子： jwplayer in fancybox not playing on ipad/iphone

但是，我没有成功。你能帮我一下吗？

我正在加载这些：

  <?php echo css('assets/fancybox/jquery.fancybox.css') ?>
  <?php echo css('assets/jplayer/skin/blue.monday/jplayer.blue.monday.css') ?>

  <?php echo js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') ?>
  <?php echo js('assets/fancybox/jquery.fancybox.js') ?>
  <?php echo js('assets/fancybox/helpers/jquery.fancybox-media.js') ?>
  <?php echo js('assets/js/fancybox.js') ?>

  <?php echo js('assets/jwplayer/jwplayer.js') ?>
  <?php echo js('assets/jwplayer/jwplayer.html5.js') ?>

在fancybox.js中，我是这样做的：

$(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: 'assets/jwplayer/jwplayer.flash.swf'},
        {type: 'html5', config: {file: this.href, provider: 'video'}},
    ]
    });
  }
});

我这样称呼视频：

<a href="spline-01.mp4" class="video_popup"> here to start movie no 11</a><br><div id="myvideo"></div>

【问题讨论】：

标签： javascript jwplayer fancybox-2 jplayer

【解决方案1】：

我写了一个灯箱，我会试试这个。

https://github.com/emaxsaun/jwbox

【讨论】：

【解决方案2】：

我终于设法解决了这个问题。下一篇：用jplayer替换jwplayer。

<a class="jwVideo" spline-01.mp4" rel="group"> Preview </a>

$(function() {
    $("a.jwVideo").click(function() {
        var myVideo = this.href; // Dont forget about 'this'

        $.fancybox({
            padding : 0,
            content: '<div id="video_container">Loading the player ... </div>',
            afterShow: function(){
                jwplayer("video_container").setup({ 

                    file: myVideo,
                    width: 640,
                    height: 385,
                    modes: [
        { type: 'html5' },
        { type: 'flash', src: 'assets/jwplayer/jwplayer.flash.swf' }
    ]

                });
            }
        });
        return false;
    });
});

【讨论】：