2

私のユーザーは、iframe の代わりに YouTube が提供するタグを利用する古い埋め込み方法を使用しています。ユーザーが次のスライドをクリックしたときにビデオを一時停止できるように、ユーザーがプレーヤーを操作したときにプレーヤーの状態 (一時停止、再生中など) を検出する方法を見つけようとしています。

現在、Wordpress を使用しており、YouTube の埋め込みコードを貼り付けることができるメタボックスがあり、そのコード ブロックをスライダーに出力しています。私は自分のローカルホストで作業しています (例: http://mysite.dev )。知っておくべきことは、ユーザーがスライダーに複数のビデオを持つ可能性があるということです。

私の人生では、YouTube API を実行することはできません。

1) これは、ボックスに貼り付けている YouTube 埋め込みオブジェクトです。

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2) このビデオは、次の div で作成したスライダーにあります。

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

私はJQueryを使用しており、次のようにAPIを呼び出してみました:

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

jQuery(document).ready(function($) {}); 内に含まれる stopCycle という関数があります。コード ブロックと、ユーザーが次のスライドをクリックしたときに呼び出す必要があるのはこの関数です。

だからここに私の質問があります：

  1. 外部 JavaScript ファイルを呼び出す必要はありますか?
  2. JQuery ドキュメントの準備完了ブロック内で YouTube API を呼び出して、ビデオが再生されているかどうかを確認するにはどうすればよいですか?
  3. コードに欠けているものや、確認する必要があるものは他にありますか?

YouTubeのURLだけ入力して、JQuery SWFObjectを使って動画を出力した方が良いのではないかと考えています。どのようにすればよいかわからないのは、各スライド (合計 5 つ) のビデオをループアウトすることです。では、各スライダーのビデオがあれば、どうすればよいでしょうか?

私は知っています... ここには質問がいっぱいです。

4

3 に答える 3

0

私が見たところ、エラーがあります：

ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

次に、ここでapi 呼び出しのいずれかを使用できます。すべてが正常に動作するはずです。

これに jQuery セレクターを使用できない理由は、 が<embed>要素を想定しているためです。jQuery が返すのは、セレクターに一致するすべての要素の配列です。

質問に答えるには:

  • 1）あなたのjsが外部ファイルにない限り、そうではありません
  • 2) 現在のビデオを取得するにはytplayer .getVideoUrl()
  • 3) 前に言ったように
  • 4/5) これを使用してプレイリストをセットアップできます。ytplayer .cuePlaylist
于 2011-10-20T17:24:12.300 に答える
0

Youtube API を使用している場合は、次のように動画を一時停止できます。

var ytplayer = document.getElementById("myytplayer");
pauseVideo = function(){
    if (ytplayer){
        ytplayer.pauseVideo();
    }
}

<a href="javascript:void(0);" onclick="pauseVideo();">Pause</a>

詳細はこちらをご覧ください:
http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

編集

埋め込みプレーヤーに ID がない場合は、次のような方法を試すことができます。

function onYouTubePlayerReady(playerId) {
    $("#" + playerId)[0].addEventListener('onStateChange', "(function(state) { return playerState(state, '" + playerId + "'); })");
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}
于 2011-10-20T18:00:44.863 に答える