开始在URL中的fancybox MIT JWPlayer本地视频，视频ID(Start local

这就是我通常开始的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>

谢谢。

您当前使用的方法是加载在一个隐藏的视频内嵌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>

为了让事情变得更灵活，每一个视频可以有它自己的尺寸（视频可能不总是相同的大小）通过其height和width使用（HTML5） data-*属性，如：

<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