YouTube動画の大きいサムネイル画像の取得エラーを回避するJavaScriptプログラム

YouTube動画には四つの場面と五つのサイズのサムネイル画像が生成されてサイトで表示できる。ただし大きいサイズの二つのサムネイル画像のsddefault（640×480）とmaxresdefault（最大解像度）のタイプは必ずしも生成されない。サムネイル画像のURLのパターンに記入してYouTubeの所定のサーバーから他と同じように取得しようとしてもエラーになってしまう。現今、何もなければグレー画像が表示される仕様なんだ。サイトでYouTube動画のサムネイル画像を表示する際に取得エラーを完全に回避するためには二つの大きいサイズよりも小さいサイズを選択するべきだけど、しかし画質を上げたりするためにも大きいサイズをどうしても使いたい場合はYouTube動画にサムネイル画像が生成されなくて取得できないエラーのときだけ小さいサイズを使うようにすれば大丈夫だと考えられる。JavaScriptでYouTubeサムネイルのエラーを判定する方法について YouTube動画のサムネイルの取得エラーのグレー画像

グレー画像｜YouTube

YouTubeがどんな条件で、サムネイル画像の取得エラーのグレー画像を出すかは公式と非公式を問わず、情報がなくて分からない。または動画を投稿する利用者がカスタムサムネイルを自由に設定できるし、場合によったら生成するサイズの全般的な決まりはないのかも知れない。グレー画像が出るのは動画のサムネイルが存在しないという取得エラーが原因だけれどもサイトで何も取得できないわけではないからJavaScriptで判定するのは厄介なんだ。もしも必要なサムネイルがなければ代わりにグレー画像が取得できてしまうわけで、取得そのものは上手く行っていると捉えられる。普通に画像エラーを判定するようにしてもプログラムは通過してしまう。種々と調べながらグレー画像のサイズが120×90で小さく固定されているから大きいサイズのサムネイル画像のリクエストに対してはYouTubeで生成されないために取得エラーで返って来るならば明らかに別物だと判定する条件に使えると気付いた。画像サイズからエラーのグレー画像かどうかをチェックするためのソースコードJavaScriptのHTMLImageElementから画像の元々の横幅を捉えるnaturalWidthプロパティを使ってYouTube画像の大きいサイズ：sddefaultとmaxresdefaultのサムネイル画像の取得エラーが起きているかどうかを判定する。画像URLでアクセスして受け取った画像の元々の横幅が120pxよりも大きければYouTube動画の大きいサムネイル画像が返って来たと分かる。反対に小さければグレー画像が返って来て取得エラーが起きているので、取得エラーの起きない小さいサイズのサムネイル画像に切り換えたりしてグレー画像を表示させずに回避するための何等の対策が取れる。JavaScriptvar yturl = "サムネイルの画像URL"; var ytimg = new Image(); ytimg.onload function () { if (ytimg.naturalWidth > 120) { // サムネイル画像ありの処理 } else { // サムネイル画像なしの処理 } } ytimg.src = yturl;先ずは取得エラーを判定したいYouTube画像のサムネイルの画像URLを用意して画像コンストラクタのImage()にsrcプロパティを付けて格納する。直ぐに使おうとするとプログラムに当該のサムネイル画像のYouTubeからの読み込みが間に合わないかも知れないので、onloadイベントハンドラにかけて読み込みが完了するのを確認しながら条件分岐のif文にかける。条件としてnaturalWidthプロパティでグレー画像の横幅の120pxよりも大きいかどうかで、YouTube動画の大きいサイズのサムネイル画像があるかないかを判定する。後はそれぞれの場合に応じて必要な処理を分けて行う。プログラミングの注意点として画像のonloadイベントハンドラが抜けてしまう恐れが全くないとはかぎらない。画像オブジェクトにsrcプロパティで画像URLをセットする部分を先に書くと危なさそうだ。

この書き方だと潜在的にはすべての環境でレースコンディションの状態になると思っている。そして特に問題になるのが古い (おそらく 8 以前の) IE だ。src に設定している画像がブラウザキャッシュから読み込まれた場合、おそらく onload イベントの設定より前に画像のロードが終わるので、ハンドラの関数が呼ばれないということが高い確率でおこる。

img 要素の src 属性と onload イベントリスナの設定タイミング｜Please Sleep｜Kosei Moriyama

サンプルでは「ytimg.src」を「ytimg.onload」の後に書いて近年では少ないかも知れないけれどもレースコンディションによる万一のプログラミングのミスを防いでいる。if文でグレー画像の横幅の「120」を基準にして取得エラーの判定を行っているけれども大きいサイズのサムネイル画像の横幅から判定しても構わないと思う。sddefaultが「640」で、maxresdefaultは判然としなくてHD以上の動画でしか生成されないようだから小さくても「720」以上かも知れない。どちらにしてもnaturalWidthプロパティで元々の横幅をチェックして実際に取得されるのがもっと小さい画像でしかなかったらエラーと判定できる。YouTubeの仕様でサムネイル画像やグレー画像のサイズなどの状況が全く変わらないとかぎらないので、もしも変わってしまったら取得できるかを判定するJavaScriptプログラムも再び合わせなくてはならないと心の片隅においておく。