Question

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

谢谢。

Answer 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）height属性传递width和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

在fancybox mit JWPlayer中启动本地视频，在网址中显示视频ID

1 个答案: