YouTubeの埋め込みコードには2種類のスタイルがある。iframeタグを使ったものとobjectタグを使ったものだ。前者はFlashとHTML5動画に対応、後者はFlashのみの対応だ。でもって、iframeのやつがが「新しい埋め込みコード」、objectのやつが「以前の埋め込みコード」と名付けられている。どうせなら新しい方がいいんだろう。という浅い考えから置換用のスクリプトを作ってみる。
まずは、「新しい埋め込みコード」と「従来の埋め込みコード」を説明したYouTubeの解説ページが以下。
動画と再生リストを埋め込む – YouTube ヘルプ
で、置換用のスクリプトの動作例がこれ。
複数のYouTube動画を埋め込んだページでもOK。とりあえず、HTMLコードをまるごとつっこめば、「以前の埋め込みコード」と「新しい埋め込みコード」に、まるごと変換する（その他の部分は手を付けてない、はず）。
作るにいたった経緯
新しい方がiframeだから、その他の部分のレンダリングに影響を与えにくいんじゃないか？ と思ってた。
知り合いのページがYouTube動画が埋め込まれまくっており、ロード完了まで待たされる。レンダリングに時間がかかるのはいいとしても、IEで以下の問題が出ていた。
- それが終わるまでスクロールさえできないというのはどういうことか？
- これは動画の埋め込みに問題があるのではないか？
で、ソースを見てみると「以前の埋め込みコード」であった。最初はそれがきっかけ。
これを全部「新しい埋め込みコード」にしたらどうか？
- YouTubeのサイトで1つ1つ新たに生成しなおしでは馬鹿らしい
- 一括で置換したい。
と、思うのも当然。置換スクリプトを作ったのだった。できあがったものの、いろいろ考えることも。
考えたこととか、結果とか
置換はJavaScriptの正規表現を使ったもので特に面倒なところはない。いや、replaceでfunction呼び出しのところはわからなくて、いろんなサイトで勉強した。
そういえば、スタート時間の指定も考えてなかった。友だちに言われて、「そういうのもあったなあ」と思い出したくらい。埋め込みコードの種類によってパラメーターの与え方も違うそうだ。「#t=」でいい、と上記YouTubeのヘルプにはあるのだが、いろいろ条件がありそう。
で、本題。「以前の」から「新しい」への置換後。結果はどうだったのか？
ロード時間は体感的にあまり変わった感じがしない。スクロールに関しても変わった気がしない。
一部だけ「新しい埋め込みコード」に差し替えた時点では、そっちのほうが先に再生可能を示す再生ボタンが出てたので、「これでイケる！」と思ったものだったのだが。全部置換してみると、なんか予想したものとは違うのだった。うーむ。ある程度以上の時間がかかるともう体感では変わらない感じになるんだろうか？ ベンチマークテストとかまでやる気も時間もとりあえずない。
さらに調べると、HTML的にどうなの？ Validじゃない！とかいう話もあったので、ちょっとこんがらがってます。
ついでに。「他の部分は手を付けてない」とは言ったものの、実体参照あたりがあやしい気も。
ということで、またこれについては追試的なことをしようと思う。メモ。
コメント