在fancybox mit JWPlayer中启动本地视频，视频ID在url答案

【问题标题】：Start local video in fancybox mit JWPlayer, video ID in url在fancybox mit JWPlayer中启动本地视频，视频ID在url
【发布时间】：2013-01-14 11:03:14
【问题描述】：

这就是我通常使用 fancybox 和 jwplayer 启动视频文件的方式。

头：

<head> /* ... */
      <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
      <script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
      <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
      <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.3" media="screen" />
      <script type="text/javascript">
        $(document).ready(function() {
          $(".fancybox").fancybox();
        });
      </script>
      <script type="text/javascript">
        $(document).ready(function() {
                  jwplayer('startTheMovie').setup({
                     file: "file.mp4",
                     width: "640",
                     height: "360",
                  });
        });
      </script>
</head>

主体：

<body>
     <div style="display:none">
        <div id="movie">                                    
          <div id="startTheMovie">Loading...</div>                          
        </div>
      </div>
      <a href="#movie" class="fancybox">Click here to start the movie</a>
</body>

现在的挑战是：我有 140 个视频文件，不希望每个文件都有一个功能。您知道在单击链接时向函数提供视频 ID（可能是视频文件的文件名）的解决方案吗？

我想过这样的事情：

<a href="#movie?id=movie1" class="fancybox">Click here to start movie no 1</a>
<a href="#movie?id=movie2" class="fancybox">Click here to start movie no 2</a>

谢谢。

【问题讨论】：

我不认为您的代码会在fancybox 中显示视频...是吗？？
我在帖子底部的想法并没有打开fancybox，这只是一个想法。上面的代码工作并在一个花式框中打开视频。
我很确定您需要为每个实例手动执行此操作。
@EthanLongTail : 不是真的 ;)
啊，谢谢 ;) 演示看起来不错。感谢分享！

标签： jquery fancybox jwplayer fancybox-2

【解决方案1】：

您当前使用的方法是将视频内联加载到隐藏的div 中，然后将div 加载到fancybox 中。

我会采用不同的方法：我会直接链接到我的视频，并在打开 fancybox 后动态加载它们。这样做的好处是视频在需要之前不会出现在 DOM 中。您也可以对多个视频使用单个脚本：

<a href="path/video01.mp4" class="fancybox">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox">Click here to start movie no 2</a>

为了使事情更灵活，每个视频都可以有自己的尺寸（视频可能不总是具有相同的尺寸），使用 (HTML5) data-* 属性传递其 height 和 width，例如：

<a href="path/video01.mp4" class="fancybox" data-width="352" data-height="270">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox" data-width="640" data-height="360">Click here to start movie no 2</a>

然后使用这个单一的脚本：

$(document).ready(function () {
  $(".fancybox").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='pathToPlayer/jwplayer.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
}); // ready

见DEMO

【讨论】：

谢谢肯尼迪！那解决了它。非常感谢您的工作。
这在 Rails 中对我不起作用。它显示 fancbox 什么都没有
请看我的问题stackoverflow.com/questions/23191946/…