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

現在使用している方法は、ビデオを隠しファイルにインラインでdivロードしてから、それdivをファンシーボックスにロードすることです。

私は別のアプローチに従います。自分のビデオに直接リンクし、fancybox が開かれると動的にロードします。これには、ビデオが必要になるまで DOM に存在しないという利点があります。また、複数のビデオに 1 つのスクリプトを使用することもできます。

<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) 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 に答える