2011-07-15 26 views
1

私はサイトのフロントページにあるさまざまなコンテンツを回転させるためにサイクルを使用していますが、そのうちのいくつかはYouTube動画である必要があります。私は、ユーザーがビデオを再生するときにサイクリングを一時停止したいが、それに苦労している。jQueryサイクルと埋め込みYouTubeビデオ - 動画再生時に一時停止

ここの例:How do I attach a jQuery event handler to a YouTube movie?はもう機能していないようですが、最近誰かが知っている技術はありますか?私はそれについて見てきたいくつかの記事を除いて、Googleはそれほど多くのことをしているわけではありませんが、それ以上は動作しないようです(私はGoogleがYT APIを変更したと仮定しています..)

感謝!

答えて

1

私はVimeoにも同様の問題がありました。私が思いついた解決策は、YouTubeやその他の同様の種類の埋め込みのために機能するはずです。

カルーセルの場合、ビデオサムネイル画像を表示するだけです。 YouTubeとVimeoの両方で、サムネイルをさまざまな解像度で簡単に取得できます(たとえば、YouTubeの場合はHow do I get a YouTube video thumbnail from the YouTube API?)。各画像に(一意の)IDが含まれていることを確認して、動画の埋め込みに必要なすべての詳細を取得できるようにします(YouTube IDをHTML IDとして使用するなど)。

イメージにjQueryクリックハンドラを添付します。クリックハンドラは、画像のIDから表示するビデオに関する関連情報を取得し、カルーセルコンテナを隠し、関連するコードを挿入して、カルーセルと同じ位置の別の要素にビデオを表示します。例えば

: -

<div id="carousel"> 
    <img src="youtubethumbnailurl1" id="1234" /> 
    <img src="youtubethumbnailurl2" id="2345" /> 
    <img src="youtubethumbnailurl3" id="3456" /> 
</div> 

<div id="video"></div> 


<script type="text/javascript"> 
    jQuery(function($) { 
    $('#carousel img').click(function(e){ 
     e.preventDefault; 
     $('#carousel').hide(); 
     var video_id = $(this).attr("id"); 
     $('#video').html(vid_iframe(video_id)).show(); 
     return false; 
    }); 

    function vid_iframe(video_id) { 
     return "<iframe src='youtubeurl'+video_id+'youtubeParameters'?</iframe>"; 
    } 
    }); 
</script> 

あなたがビデオを閉じて、必要であれば、カルーセルに戻るには、適切なハンドラを追加する必要があると思います。

これはちょっと複雑ですが、どのような種類の埋め込みにも適用でき、また、どのように表示されるのかについて多くの柔軟性を与えます(私の場合、サムネイルは再生時の実際の映像よりもはるかに小さくなければなりません) 。

0

サイクル(一時停止)を一時停止してから、ビデオを(クリックして)再生したいとします。

空のdiv(#slidestop)をビデオ(ビデオコンテナのCSS属性と一致するように)にレイヤーし、次のコードを追加するだけで、チャームのように機能します。

$('#slidestop').hover(function() { 
$('#homeslides').cycle('pause'); 
$('#slidestop').hide(); 
}); 
関連する問題