Question

我正在尝试将Flowplayer与Fancybox结合使用，如下例所示：http://demos.flowplayer.org/scripting/overlay-fancybox.html

当我实现它时它会起作用。

然而，视频的href只是写成一个锚：

<a href="#night1" class="fancybox">Video 1</a>

URL的其余部分是在脚本中构建的（也在上面的示例页面中显示）

但是，我希望它链接到完整的视频网址，如下所示：

<a href="http://stream.flowplayer.org/night1/640x360.mp4" class="fancybox">Video 1</a>

当我更改脚本以使用完整的URL时，它将打开视频而不是使用fancybox。我使用preventDefault()来停止锚点默认操作，但这也阻止了Fancybox的工作。我不知何故需要触发fancybox动作才能打开流程播放器。

很抱歉没有提供JSFiddle，但我认为我不能在那里包含流程图。一开始链接的示例可能会对您有所帮助。

-

- 这是基于如上所示的全长链接的脚本：

$( document ).ready(function() {
  $(".fancybox").click(function(event) {
    // don'T follow the video link
    event.preventDefault();


  // trigger the fancybox for the just clicked link and do as follows
  // this is whats not working, the fancybox is not getting triggered  
  $(this).fancybox({
    tpl: {
      // wrap template with custom inner DIV: the empty player container
      wrap: '<div class="fancybox-wrap" tabIndex="-1">' +
            '<div class="fancybox-skin">' +
            '<div class="fancybox-outer">' +
            '<div id="player">' + // player container replaces fancybox-inner
            '</div></div></div></div>'
    },

    beforeShow: function () {
      var base = this.href;
      base = base.substr(0, base.lastIndexOf('.'));

      // base should be the full length link without file extension now     
      alert(base);

      // install player into empty container
      $("#player").flowplayer({
        splash: true,
        ratio: 9/16,
        playlist: [
          [
            { webm: base + ".webm" },
            { mp4: base + ".mp4" },
            { ogg: base + ".ogv" },
            { flash: "mp4:" + base }
          ]
        ]
      });
      flowplayer("#player").play(0);

    },
    beforeClose: function () {
      // important! unload the player
      flowplayer("#player").unload();
    }
  });


  });
});

Answer 1

对我来说，一个可行的解决方案是替换悬停时的href：

$(document).ready(function(){

    var url = window.location;
    var prot = window.location.protocol;
    var host = window.location.host;
    var path = window.location.pathname;

    var videoclip='';
    var filename='';

    $(".videobox").hover(function(){
        videoclip=$(this).attr('href');
        filename = videoclip.substring(videoclip.lastIndexOf('/')+1);
        filename = filename.substr(0, filename.lastIndexOf('.'));
        $(this).attr({"href":"#"+filename });
    },function(){
        $(this).attr({"href":""+videoclip+""});
    });

    $('.videobox').fancybox({
        tpl: {
          // wrap template with custom inner DIV: the empty player container
          wrap: '<div class="fancybox-wrap" tabIndex="-1">' +
                '<div class="fancybox-skin">' +
                '<div class="fancybox-outer">' +
                '<div id="player">' + // player container replaces fancybox-inner
                '</div></div></div></div>' 
        },

        beforeShow: function () {
          var base = this.href.slice(1),
              cdn = prot + "//" host + path;

          // install player into empty container
          $("#player").flowplayer({
            splash: true,
            ratio: 9/16,
            qualities: "360p,480p,720p,1080p",
            defaultQuality: "360p",
            rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
            playlist: [
                [
                    { mpegurl: cdn + base + ".m3u8" },
                    { webm: cdn + base + ".webm" },
                    { mp4: cdn + base + ".mp4" },
                    { flash: "mp4:" + base + ".mp4" }
                ]
            ]
          });
          flowplayer("#player").play(0);

        },
        beforeClose: function () {
          // important! unload the player
          flowplayer("#player").unload();
        }
    });

});

适用于我测试过的所有主流浏览器。

在Fancybox中使用具有绝对URL的Flowplayer

-

-

1 个答案: