0

这就是我通常使用 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>

谢谢你。

4

1 回答 1

5

您当前使用的方法是将视频内联加载到 hiddendiv中，然后将其加载到divfancybox 中。

我会采用不同的方法：我会直接链接到我的视频，并在打开 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

见演示

于 2013-01-14T21:23:28.297 回答