(実行例とダウンロードは ↓ 下の方 ↓ にあります)
1.概要
Youtubeの映像をウィンドウサイズに合わせてリサイズ表示するHTMLです。
2.使い方
youtube_resize.html を ブラウザで開くと起動します。
(1)映像1個の再生
画面下部のURLのテキストボックスに映像のURLを入力し、
Playを押すと再生します。
( http://www.youtube.com/watch?v=映像ID 等)
(2)複数の映像の再生
画面下部のURLsのテキストボックスに複数行のURLを入力し、
Playを押すと、複数の映像を順番に再生します。
(各URLごとに改行してください)
(3)キーワード検索による再生
画面下部のKeywordsのテキストボックスに検索キーワードを入力し、
Playを押すと、検索結果の映像を順番に再生します。
検索キーワードの入力ルールの詳細については、
「3.検索キーワードの入力ルール」を参照ください。
(4)ループ再生
画面下部のLoopにチェックを入れてからPlayを押すとループ再生になります。
複数映像再生の場合は、最後の映像が終わると先頭の映像に戻ります。
(※)再生中にLoopのチェックを変更しても無効です。Playを押したときにのみ反映されます。
(5)関連映像表示
画面下部のRelにチェックを入れてからPlayを押すと、
再生終了時に関連映像が表示されます。
(※)ループ再生の場合は、関連映像は表示されません。
(※)再生中にRelのチェックを変更しても無効です。Playを押したときにのみ反映されます。
(6)画面アスペクト比の変更
画面下部のARの選択(16:9等)を変更すると、画面のアスペクト比を変更できます。
3.検索キーワードの入力ルール
検索キーワードの入力ルールの詳細を以下に示します。
(各種記号 | - = * " と数字はすべて半角です)
(1)複数の単語を空白で区切ると、AND検索になります
(2)複数の単語を | で区切ると、OR検索になります
(3)単語の前に - を付けると、NOT検索になります
( - の前には空白が必要です。空白がなければ通常文字扱いになります)
( | - という記述はできません(NOT検索のORをとることは不可))
(4)文字列をダブルクォート(")でくくると、フレーズ検索になります。
(空白や記号も含めて検索されます)
(5)ルールは左から順番に評価されます。順番を変える()等はありません。
(6)全角/半角 および ひらがな/カタカナ は、区別されます。
ただし、アルファベットの 大文字/小文字 は、区別されません。
(7)検索結果の表示件数は、デフォルト20件、最大50件までです。
(8)Keywordsのテキストボックスの先頭に =10 のように書くと、
検索結果の表示開始順位の指定になります。
( 例えば、=10 は、検索結果の10番目の映像から再生を開始します)
また、Keywordsのテキストボックスの先頭に =10,1 のように書くと、
検索結果の表示開始順位と、検索結果の表示最大数の指定になります。
( 例えば、=10,1 は、検索結果の10番目の映像から1映像だけ再生します)
( =XXはテキストボックスの先頭に空白を入れずに書いたときのみ有効です。
例えば、=10 猫 のように 検索キーワードを後に書いてください)
(9)Keywordsのテキストボックスの先頭に =* を書くと、
タイトルの厳密なチェックをしなくなります。
検索の精度は下がりますが、検索結果の件数は増える可能性があります。
( =*はテキストボックスの先頭に空白を入れずに書いたときのみ有効です。
例えば、=* 猫 のように 検索キーワードを後に書いてください)
((8)の番号指定と併用する場合は、=*10 のように記述してください)
4.注意事項
(1)キーワード検索には、YouTube Data API v3 を使用しています。
この API は登録制で、一日の使用量(検索回数)に制限があります。
実際に運用する場合には、以下のページを参照して API キーを取得し、
本HTMLファイル内の変数 api_key に設定してください。
https://developers.google.com/youtube/registering_an_application?hl=ja
2020-7-25 追記：
YouTube Data API v3 の API キーの取得条件が厳しくなっているようです。
本HTMLファイル内の API キーは、YouTube (Google) によって無効にされました。
このため、デフォルトでは、Invidious API によるキーワード検索を
行うように変更しました。
( https://github.com/iv-org/invidious )
( https://github.com/iv-org/documentation/blob/master/docs/api.md )
(2)IE8でローカルでHTMLファイルを起動すると、セキュリティのメッセージが出ます。
→ 実行するにはユーザーの許可が必要です。
(3)埋め込み禁止に設定されている動画は 再生できません。
5.不具合
(1)過去の再生開始位置を記憶してしまい時間指定が無効になることがある。
→ ブラウザのYouTube関連のクッキー削除で復旧する(2015-5-11)
(2)キーワード検索で、検索結果が複数あるのに1映像だけの再生になることがある。
→ しばらくしたら直った。原因不明(2015-5-12)
(3)YouTube (Google) によって YouTube Data API v3 の API キーが無効にされたため、
キーワード検索が使用できなくなってしまった。
→ 90日間使用していないためというメールが来た(2020-5-13)
→ Request Quota のページで、使用していると回答した(2020-5-13)
→ 今度は、Privacy Policy が明記されていないというメールが来た(2020-5-14)
→ Privacy Policy の表示を追加して、メールで連絡した(2020-5-21)
→ 音沙汰がないため、再度 Request Quota のページに記入した(2020-6-13)
→ 今度は「重要な独立した価値を付与していない」ポリシー違反というメールが来た(2020-6-30)
→ デフォルトでは、Invidious API によるキーワード検索を行うように変更した(2020-7-25)
6.その他 情報等
(1)CSSによる映像リサイズの出典は以下です。
Creating Intrinsic Ratios for Video
by Thierry Koblentz - May 26, 2009
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
7.環境
OS : Windows 10 (version 22H2) (64bit)
ブラウザ : Chrome v124
でのみ動作確認。
8.履歴
2012-11-12 v1.00 (初版)
2012-11-26 v1.01 一部修正(再生パラメータrel対応)
2012-12-7 v1.02 一部修正(字下げ等)
2013-1-18 v1.03 一部修正(コメント修正のみ)
2013-1-20 v1.04 URL中の()でくくられた部分をコメントとして無視するようにした
( http://～ (曲名) のように後ろにコメントを入れられるように)
2013-1-20 v1.05 一部修正(再生パラメータvq対応)
2013-1-20 v1.06 一部修正(CSS一部変更)
2013-2-9 v1.07 一部修正(画面アスペクト比設定ar追加)
2013-3-10 v1.08 一部修正(再生パラメータ順番入れ換え)
2013-3-21 v1.09 複数映像のループ再生が正常動作しない。
いろいろ試したが直らず
2013-3-21 v1.10 複数映像のループ再生が正常動作しない。
いろいろ試したが直らず
→ 2013-9-13 YouTube側がバージョンアップして直ったもよう
2013-4-4 v1.11 一部修正(エラー処理修正)
2013-4-7 v1.12 再生リストのURLに対応
2013-4-7 v1.13 一部修正(if文の比較を省略)
2013-4-24 v1.14 一部修正(初期表示変更)
2013-4-26 v1.15 一部修正(window.onload使用)
2013-4-27 v1.16 再生リストURLの長いID(最大34桁?)に対応
2013-4-30 v1.17 キーワード検索に対応
2013-5-1 v1.18 一部修正(キーワード検索:絞込み条件修正)
2013-5-1 v1.19 一部修正(キーワード検索:OR検索修正)
2013-5-1 v1.20 一部修正(キーワード検索:エラー処理追加)
2013-5-1 v1.21 一部修正(キーワード検索:NOT検索修正)
2013-5-1 v1.22 一部修正(キーワード検索:タイトルチェックなし指定を追加)
2013-5-1 v1.23 一部修正(キーワード検索:検索結果の表示開始順位指定を追加)
2013-5-1 v1.24 一部修正(キーワード検索:検索結果の表示開始順位指定ミス)
2013-5-1 v1.25 一部書き直し
2013-5-3 v1.26 関連映像表示と画面アスペクト比の設定を画面に追加した
2013-5-3 v1.27 一部書き直し
2013-5-5 v1.28 一部修正(背景色と文字色を変更)
2013-5-5 v1.29 一部書き直し
2013-5-5 v1.30 一部修正(キーワード検索:エラー処理追加)
2013-5-6 v1.31 一部修正(キーワード検索:フレーズ検索修正)
2013-5-7 v1.32 一部書き直し
2013-5-25 v1.33 一部修正(キーワード検索:検索結果の表示最大数の指定を追加)
2013-5-31 v1.34 一部修正(起動時処理修正)
2013-6-10 v1.35 一部修正(URLフラグメント指定(#t=10s等)に対応(1個再生のみ))
2013-6-11 v1.36 一部修正(URLフラグメントありのときのリロード処理修正)
2013-6-24 v1.37 一部修正(URLフラグメントが正常動作しない場合があるので、
&start=に変換するようにした)
開始/終了時間指定(URLの&start=10や&end=20等)に対応(1個再生のみ)
2013-7-7 v1.38 一部修正(不要行削除)
2013-8-6 v1.39 一部修正(画面の最大高さチェック追加)
2013-8-7 v1.40 一部修正(画面の最大高さチェック追加2)
2013-8-31 v1.41 一部修正(エラーチェック等)
2013-9-1 v1.42 一部書き直し
2014-1-21 v1.43 一部書き直し
2014-2-4 v1.44 一部修正(映像1個のループ再生処理修正(YouTube側の変更に対応))
2014-2-7 v1.45 一部修正(Youview名前空間を導入)
2014-2-8 v1.46 一部修正(コメント修正のみ)
2014-2-18 v1.47 一部修正(コメント修正のみ)
2014-4-19 v1.48 一部修正(HTML5プレイヤー暫定無効化)
2014-4-25 v1.49 一部書き直し
2014-4-30 v1.50 一部修正(HTML5プレイヤー無効化はあきらめた)
2014-7-13 v1.51 一部修正(HTML5プレイヤーでループ再生が正常動作しない件の対策(不完全))
2014-8-9 v1.52 一部修正(v1.51の対策を削除(YouTube側で修正されたもよう。
ただし切り換え時に一瞬サムネイルが出る))
2015-1-19 v1.53 一部修正(エラーチェック追加等)
2015-5-9 v1.54 一部修正(キーワード検索について、YouTube Data API v2 が廃止となったため
v3 を使うように変更。ただし、表示開始順位を指定しても、
50件より後ろの検索結果を表示できなくなった)
2015-5-11 v1.55 一部修正(キーワード検索について、50件より後ろの検索結果も表示可能とした)
2015-7-22 v1.56 一部修正(キーワード検索について、検索結果の重複チェックを追加)
2017-4-9 v1.57 一部修正(複合代入演算子の使用等)
2017-4-18 v1.58 一部修正(内部処理の変数名変更)
2017-4-29 v1.59 一部修正(URLパラメータ取得処理見直し)
2017-6-6 v1.60 一部修正(パラメータ取得処理一部見直し)
2017-7-17 v1.61 一部修正(書式修正等)
2017-7-20 v1.62 一部修正(書式修正等)
2018-6-29 v1.63 一部修正(HTML見直し)
2020-5-21 v1.64 Privacy Policy の表示を追加 (YouTube (Google) の指摘による)
2020-7-25 v2.00 デフォルトでは、Invidious API によるキーワード検索を行うように変更
(タイムアウト15秒→20秒,表示件数のデフォルト50件→20件)
2020-7-26 v2.01 一部修正(検索中表示の追加等)
2020-7-26 v2.02 一部修正(タイムアウト時間を変数に設定)
2020-7-27 v2.03 一部修正(引数のチェックの追加等)
2020-8-8 v2.04 一部修正(表示の調整等)
2020-10-6 v2.05 一部修正(キーワード検索 (Invidious API) の接続先変更)
2020-10-27 v2.06 一部修正(キーワード検索 (Invidious API) の接続先変更等)
2020-10-28 v2.07 一部修正(キーワード検索のエラー処理追加)
2021-3-21 v2.10 一部修正(ループ再生処理修正。廃止機能の処理を削除。
キーワード検索 (Invidious API) の接続先変更)
2022-7-14 v2.11 一部修正(キーワード検索 (Invidious API) の接続先変更等)
2024-5-6 v2.12 一部修正(キーワード検索 (Invidious API) の接続先変更等)
＜実行例＞
https://hamayapp.appspot.com/static/youtube_resize.html
＜ダウンロード＞
youtube_resize.zip (2024-5-6)