MovieJukeBox への Youtube 動画の埋め込み方法検討

IFrame 埋め込みは読み込みに時間がかかる。AS3オブジェクト埋め込みは読み込みは早いが不満点がある。

AS3オブジェクト埋め込み

読み込み速いが、ポップアップ内で再生を開始し、一時停止してもしなくても、ポップアップを閉じてしまうと、同一作品について再びポップアップしても再生できなくなる。全画面表示ボタンあるのに全画面表示もできない。

ClassMJB.embedAS3Youtube

Public Function embedAS3Youtube(ByVal YotubeURL As String, ByVal Width As String, ByVal Height As String) As String

    Dim retYoutube As String

    retYoutube = "<embed src=" + "" + TMDbConstance.YoutubeEmbedURL + YotubeURL + "?version=3&autoplay=1" + "" _
                + "type = ""application/x-shockwave-flash""" + "allowscriptaccess = ""always""" + " width=" + "" + Width + "" + " height=" + "" + Height + "" + ">" _
                + "</embed>"
    retYoutube += "<object width=" + "" + Width + "" + " height=" + "" + Height + "" + ">" + "<param name=""movie""" + "value=" + "" + TMDbConstance.YoutubeEmbedURL + YotubeURL + "?version=3&autoplay=1" + "" + ">" + "</param>"
    retYoutube += "<param name=""allowScriptAccess"" value=""always""></param>"

    Return retYoutube

End Function

web.config

<add key="YoutubeEmbedURL" value="https://www.youtube.com/v/"/>

embed埋め込み

読み込みとても遅いが、ポップアップ内で再生を開始し、ポップアップを閉じてしまっても、再びポップアップしても再生できる。ポップアップが閉じられた時点を保持せず最初からの再生になる。ポップアップした時にポップアップが一瞬白くならずもっさりしない。fs=1をつけて全画面表示ボタンを有効化しても全画面表示できない。

ClassMJB.embedYoutube

Public Function embedYoutube(ByVal YotubeURL As String, ByVal Width As String, ByVal Height As String) As String

    Dim retYoutube As String

    retYoutube = "<embed src=" + "" + TMDbConstance.YoutubeEmbedURL + YotubeURL + "" _
        + " width=" + "" + Width + "" + " height=" + "" + Height + "" + ">" _
        + "</embed>"

    Return retYoutube

End Function

web.config

<add key="YoutubeEmbedURL" value="https://www.youtube.com/embed/"/>

IFrame player API埋め込み

これが一番いい。読み込みはとても早く、ポップアップ内で再生を開始し、ポップアップが閉じてしまっても、再びポップアップしても再生できる。ポップアップが閉じられた時点を保持せず最初からの再生になる。ポップアップした時にポップアップが一瞬白くなって一瞬もっさりする。全画面表示できる。controls=2 をつけないと読み込みがとても遅くなる。
デバッグだと、作品Aをポップアップしそれを閉じ、作品Bをポップアップしそれを閉じ、再度作品Aを開くとAJAXのエラーが発生する。

ClassMJB.iframeYoutube

Public Function iframeYoutube(ByVal YotubeURL As String, ByVal Width As String, ByVal Height As String) As String

    Dim retYoutube As String

    retYoutube = "<iframe width=" + """" + Width + """" + " height=" + """" + Height + """" + " src=""https://www.youtube.com/embed/" + YotubeURL + "?controls=2" + """" + " frameborder=""0"" allowfullscreen></iframe>"
    Return retYoutube

End Function

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube — Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja

（引用）


controls (サポートされるプレーヤー: AS3, HTML5)

値: 0、1、または 2。デフォルトは 1 です。動画のプレーヤー コントロールを表示するかどうかを指定します。Flash プレーヤーを読み込む埋め込み IFrame の場合、いつプレーヤーにコントロールを表示するかと、いつプレーヤーを読み込むかも定義します。

• controls=0 – プレーヤーにプレーヤー コントロールは表示されません。埋め込み IFrame の場合は、Flash プレーヤーがすぐに読み込まれます。
• controls=1 – プレーヤーにプレーヤー コントロールが表示されます。埋め込み IFrame の場合は、コントロールがすぐに表示され、Flash プレーヤーもすぐに読み込まれます。
• controls=2 – プレーヤーにプレーヤー コントロールが表示されます。埋め込み IFrame の場合は、ユーザーが動画の再生を開始した後にコントロールが表示され、Flash プレーヤーが読み込まれます。

注: 埋め込み IFrame の場合は、パラメータ値が 1 と 2 の場合のユーザー エクスペリエンスはまったく同じですが、controls=2 を指定すると controls=1 よりもパフォーマンスがよくなります。現在は、動画のタイトルのフォントサイズが異なるなど、2 つの値の間でプレーヤーの表示にまだ多少の相違があります。ただし、両方の値の間の相違がユーザーにまったくわからなくなった場合は、パラメータのデフォルト値が 1 から 2 に変更される可能性があります。

結論

IFrame player API埋め込みを使用し controls=2 をつける。MovieJukeBox をバージョン3.2.2へアップデート。