0

私が取り組んでいる (バンド用の) サイトがあります: http://atfa.hostei.com/。

ビデオ ページではイントロ ビデオが表示され、ライブ ストリーム ページにリダイレクトされ、ライブ コンサートを視聴できます。紹介ビデオの下にチャットルームがあります。チャット ルームの下に、YouTube のすべての動画や更新情報などを投稿したいと考えています。

試行錯誤しながらどうすればいいのか考えてみたのですが、迷ってしまいました。YouTube ビデオ プレーヤーが必要ですが、クリックするとページ上のビデオが変更される他のビデオ サムネイルが表示されます。

しかし、あまりにも多くのビデオが必要ないので、1 2 3... 8 というメッセージの下に小さなタブを作成して、同じページを更新せずに別のビデオを開くことができるようにします。

私が求めているものの例は、ここのビデオページにあります: http://www.higatv.com/rhtv/?page_id=142

ソースを見ましたが、迷っています。

4

1 に答える 1

2

あなたへの私のアドバイスは、1 つの機能を動作させてから、次の機能に移ることです。よく知らない 3 つの異なることを実装しようとしないでください。

始めるための簡単な例。

1) ユーザー\チャンネルのすべてのビデオを取得するか、RSS フィードを実行してリストをチェックし、それに基づいて解析することができます

またはhttp://gdata.youtube.com/feeds/api/videos?author=を実行して、情報を解析できます

または手動で配置することもできます。

2) ページネーションを使用して、それらを異なるページに分けます。http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/のようなもの

3) 動画のプレースホルダー

     <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/2pROe-xq2vo?rel=1&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0" style="width: 425px; height: 350px">
        <param name="wmode" value="transparent">
        <param name="movie" value="http://www.youtube.com/v/2pROe-xq2vo?rel=1&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0">
        <param name="allowfullscreen" value="true">
      </object>

4) onclick でビデオの URL を変更する<param name="movie"か、古いオブジェクトを削除して別のオブジェクトを作成します。

編集：

ステップ（4）の例はこちらhttp://jsfiddle.net/794Re/3/

動画を埋め込むには 2 つの方法があります。シンプルに見えるiframeが好きです。

編集：

ここに例がありますhttp://jsfiddle.net/zK4Z8/1/

サムネイルを取得するコツは、動画IDを入れることです<img src="http://i.ytimg.com/vi/VideoIdGoesHere/default.jpg" width="120" height="90" />

次に、ビデオをロードするには、基本的に関数のように映画のパラメーターとデータ属性を変更しますloadVideoById(videoId)

<a id="img1" onclick="load(this);"  rel="2yoKjhxXVN8" style="margin-left: 41px; ">
  <img  src="http://i.ytimg.com/vi/2yoKjhxXVN8/default.jpg" width="120" height="90" />
</a>

function load(element) {
    var videoId = $("#" + element.id).attr("rel");
    $('#movieObj').remove();
     $(loadVideoById(videoId)).prependTo('#vholder');
}

function loadVideoById(videoId) {
    return '<object id="movieObj" type="application/x-shockwave-flash" data="http://www.youtube.com/v/' + videoId + '?rel=1&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0" style="width: 425px; height: 350px"><param name="wmode" value="transparent"><param name="movie" value="http://www.youtube.com/v/' + videoId + '?rel=1&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0"><param name="allowfullscreen" value="true"></object>';
}
于 2012-05-29T18:58:20.990 に答える