1

これを行うための最良の方法を見つけようとしています。Vimeo からビデオを取り込むメイン ビデオ プレーヤーがあります。このメイン プレーヤーの下には、他の動画のサムネイルがあります。ユーザーがサムネイルをクリックすると、そのサムネイルビデオがメインビデオの代わりになります。

Vimeo の埋め込みはすべて iFrame ベースです。iFrame 全体を置き換える必要があるのか​​、URL などだけを置き換える必要があるのか​​ わかりません。また、メインとサムネイルのサイズの違い。それが自動的に引き継がれるのか、それとも Vimeo のコードが巧妙にサイズ変更できるのかはわかりません。また、Jquery のクリックは、サムネイルが通常小さいビデオを再生することを期待しているクリックをオーバーライドできますか?

HTML

<div class="blogPlayer">
    <iframe src="#" width="528" height="297" frameborder="0"></iframe>
</div>

<ul class="blogThumbnails>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
</ul>

このjQueryは完全にテストされておらず、その場で行われていますが、次のようなことを考えていました...

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer').replaceWith('video');
})
4

1 に答える 1

3

iframe 全体を置き換えるのではなく、src ファイルだけを置き換える必要があります。iframe 全体を置き換える場合は、クリックされたリストの属性を調整する必要があります。

これは私が念頭に置いていることです：

<div>
      <iframe src="#" id="blogPlayer" width="528" height="297" frameborder="0"></iframe>
</div>

$('.blogThumbnails li').click(function(){
   var url = $(this).attr('src');
   $('#blogPlayer).attr('src', url);
   return false;
})

他のルートを使用する場合は、幅と高さを調整する必要があります。

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer')
          .replaceWith(video)
          .attr({
                  width: '528',
                  height: '297'
          });
   return false;
})
于 2011-04-08T15:57:54.120 に答える