3

私のサイトには、ユーザーが選択したビデオを再生する固定幅のクロムレス YouTube プレーヤー (iframe) が埋め込まれています。うまく機能していますが、少し厄介な点が 1 つあります。その高さがビデオに反応しません。映画のような超ワイドスクリーン ビデオには水平の黒いバーがあり、古いスタイルの 4:3 ビデオには垂直の黒いバーがあります。

再生中のビデオに応じてプレーヤーの高さを調整する合理的に単純なソリューションはありますか? Google が明らかにしたことはすべて、流動的なレイアウトのサイト用のスクリプトです (これは私のものではありません)。Javascript、Coffeescript、および Jquery ソリューションはすべて許容されます。

4

1 に答える 1

5

期待どおりの動作を実現するには、ビデオの縦横比を知る必要があります。これは、YouTube が提供する API を使用して非常に簡単に行うことができます。まず、ビデオ情報を JSON 形式で取得するには、次の形式の URL を取得します。

https://gdata.youtube.com/feeds/api/videos/video_id?v=2&prettyprint=true&alt=json

ここで、 video_idは、埋め込む動画の ID です (「prettyprint」は、人間が判読できるようにするだけであることに注意してください。実際のアプリケーションでは、帯域幅を節約するために削除してください)。気になる物件はentry.media$group.yt$aspectRatio.$t. このプロパティは、ビデオが 16:9 の場合は「ワイドスクリーン」に設定され、4:3 の場合は定義されません。したがって、その値を簡単に確認し、<iframe>それに応じてサイズを変更できます。

以下に例を示します:
HTML:

<iframe id = "vid" width="500" src="http://www.youtube.com/embed/ni9RS4pgRXA" frameborder="0" allowfullscreen></iframe>

(ここでの幅は 500 です。もちろん、任意の値にすることができます)。

JavaScript ( jQueryを使用しますが、必須ではありません):

$.getJSON("https://gdata.youtube.com/feeds/api/videos/ni9RS4pgRXA?v=2&alt=json",
function(data) {
            var obj = $("#vid");
            var asp = data.entry.media$group.yt$aspectRatio.$t;
            console.log("Aspect Ratio is", asp); //Debugging line. "undefined" if video is 4:3.
            if(asp == "widescreen") {
                obj.height((Math.floor(obj.width() * 9 / 16)));
            }
            else {
                obj.height((Math.floor(obj.width() * 3 / 4)));
            }
        });

ここ (リンク) では、16:9 のビデオの例を含む実際のデモを見つけることができます。Javascript コードは非常に単純ですが、不明な点があれば教えてください。詳しく説明します。

于 2012-08-13T12:47:13.903 に答える