web-dev-qa-db-ja.com

同じページに埋め込まれたyoutube / vimeoと対話するディープリンクのように機能するリンクを自分のページに作成するにはどうすればよいですか？

ウェブサイト上のリンクを、同じページに埋め込まれたvimeo/youtubeビデオへのディープリンクとして機能させる手法を知っている人はいますか？

そうすれば、ブログの投稿などにビデオを含めることができ、ディープリンクされたタイムコードを通じてビデオの特定の部分を参照できます。これを行うには、JavaScriptの魔法が必要だと思います。

別の注意事項として、タグのディープリンクとvimeoを導入できる「タグ付けの力」があればいいのにと思います。

videoembedpersonal-websiteyoutube
2
thunki

次のように、 'start'属性を使用して特定の時間に再生を開始することにより、ディープリンクされたYouTubeビデオを埋め込むことができます。

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=20" frameborder="0" allowfullscreen></iframe>

次のように、JavaScriptとjQueryを使用して開始時間を変更できます。

jQuery

function setTheTime(theTime) {
    var videoURL = $('iframe#video').attr('src');
    videoURL = videoURL.replace(/=.+/, "="+theTime+"&autoplay=1");
    $('iframe#video').attr('src',videoURL);
}

$('.time').click(function() {
    var newTime = $(this).attr('href').replace('#','');
    setTheTime(newTime);
});

HTML

<p>Watch this video from <a href="#20" class="time">20 seconds</a> or from <a href="#40" class="time">40 seconds.</a></p><br/><br/>

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=0" frameborder="0" allowfullscreen>    </iframe>

デモ
これは、結果の 作業デモです。 （「20秒」と「40秒」をクリックします右下の「結果」フレーム内のリンクをクリックして、動作を確認します。

注
デフォルトのYouTube埋め込みコードを変更して、?start=0をsrcおよびid="video"属性に追加し、jQueryでそのiframeをターゲットにできることに注意してください。

それが完了すると、<a href="#20" class="time">link text here</a>形式を使用するページ上のすべてのリンクが開始時間を変更し、ビデオを自動再生します。

私は埋め込みコードに詳しくないので、これがVimeoで可能かどうかはわかりません。

1
Nick

YouTubeの場合、これはタイムコードを使用してリンクし、希望のビットに到達する方法です。 http://www.google.com/support/youtube/bin/answer.py?answer=116618

Vimeoの場合、このFAQにその方法が記載されていますが、それがビデオの場合のみです。 http://vimeo.com/help/faq#chapters

0
paulmorriss