@GT86iのブログ一覧

文字数制限になったので、前回、前々回の続きです。（笑）
その前に、おさらいです。
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中の http://www.youtube.com/v/ と ? の間にある ***********部分の１１文字がその動画のVIDEO_ID（動画 ID）で、それ以降の ●●=値 とあるのがパラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
動画 ID以降のパラメータは省略することもできますが、その際はYouTubeが設定したデフォルト（初期設定）値になります。 複数のパラメータを指定する場合、間に &（若しくは&） を入れます。
動画の埋め込みサイズを変えたい場合は、width="580" height="326"の数字を変えます。
（なお、このカスタマイズはスマートフォンなどのように「Adobe Flash Player」がインストールされていないブラウザでは作用しません。）

◇ 自動再生するパラメータ

デフォルト値は 0 です。
このパラメータ値を 1 に指定することで、ウェブページが表示されると同時（プレーヤーを読み込んだとき）に、自動的に動画を再生させることができます。
※ ブログにバックグラウンドミュージックを流したいということで使われるケースもあるようですが、視聴者側からすると迷惑に感じる場合の方が多いと思いますので御使用は程々に。（笑）

◇ 動画情報の表示を設定するパラメータ

現在のYouTube「埋め込みプレーヤー」の動画には、再生開始前に動画の上部にタイトルが表示されるようになっています。
この動画情報は表示しないようにすることが、showinfoパラメータの値を 0 に指定することで設定できます。デフォルト値は 1 です。

タイトルが表示されると、動画の内容が予め想像できてしまうような場合などに使うと効果的です。（笑）

◇ 再生位置を指定するパラメータ

このパラメータを指定することで、動画の再生開始や終了される位置をあらかじめ設定しておいて、その位置から再生を開始や終了させることができます。

動画再生開始位置を指定するには&start=21の数字部分を、動画の再生終了位置を指定するには&end=65の数字部分を、指定したい時間（秒単位の値）に換えます。

動画の再生開始位置指定は「埋め込みプレーヤー」だけでなく、YouTubeの動画再生ページにリンクする場合でも指定可能です。
指定方法は、YouTubeの動画再生ページにリンクするURLの末に 「#t=分値m秒値s」を追加します。
例： https://www.youtube.com/watch?v=GagW5fYE62M#t=1m21s

◇ 再生画質を指定するパラメータ

YouTubeでは、アップロードされた元の動画ファイルを、標準（360p）画質版、高画質（480p）版、ＨＤ画質（720p）版、フルＨＤ画質（1080p）版など幾つかにエンコードして保存しています。
以前のYouTube「埋め込みプレーヤー」の仕様では&ap=%2526fmt%3D画質値と設定すると再生する画質を指定することができましたが、その後このパラメーターは無効になってしまいました。
しかし現在、AS3プレイヤータイプのYouTube「埋め込みプレーヤー」では下記のパラメータで画質指定できるようです。

パラメータ値	画　質
&vq=small	低画質（240p）
&vq=medium	標準画質（360p）
&vq=large	高画質（480p）
&vq=hd720	ＨＤ画質（720p）
&vq=hd1080	フルＨＤ画質（1080p）
&vq=highres	フルＨＤ画質画質（1080p）以上

◇ 複数の動画から「再生リスト」をつくって順番に再生させるパラメータ

YouTube埋め込みプレイヤーには、複数のYouTube動画をひとつにまとめた「再生リスト」を動画プレーヤーとして埋め込む機能もあります。

◇ 繰り返し再生するパラメータ

デフォルト値は 0 です。
単一動画プレーヤーの場合に 1 を設定すると、最初の動画が繰り返し再生されます。再生リストプレーヤーまたはカスタム プレーヤーの場合、再生リスト全体を再生した後、最初の動画から再び再生が始まります。

注: このパラメータは AS3 プレーヤーと埋め込み IFrame でのみサポートされており、AS3 または HTML5 プレーヤーのいずれかが読み込まれます。loop パラメータは、現時点では playlist パラメータと組み合わせて AS3 プレーヤーで使用した場合のみ動作します。単一の動画をループさせる場合は、loop パラメータの値を 1 に設定し、既に Player API URL に指定してある動画 ID と同じ値を playlist パラメータの値に設定します。

◇ 動画アノテーションの表示設定パラメータ

デフォルトは 1 です。
YouTubeではアップロードした動画に、後から吹き出し・コメント・他の動画へのリンクなどを挿入して動画を編集できる機能があります。
公開されたアノテーションは、デフォルトではテロップ表示されますが、iv_load_policy=3と設定するとそのアノテーションを始めから表示しないで再生させることもできます。

◇ 再生するコンテンツの選択するパラメータ

listType パラメータは、プレーヤーに読み込むコンテンツを識別するときに list パラメータと組み合わせて使用します。 有効なパラメータ値は、playlist、search および user_uploads です。
埋め込みプレーヤーの設定次第で、動画、再生リスト、ユーザーのアップロード動画、または特定のクエリに対する検索結果が読み込まれるようにすることができます。 ただし、単一動画の読み込みオプション以外は、AS3 埋め込みオブジェクトおよび AS3 プレーヤーを読み込む埋め込み IFrame のみでサポートされます（埋め込み IFrame では HTML5 プレーヤーを読み込むこともできます）。

• playlist 再生リストの読み込み
• user_uploads ユーザーのアップロード動画の読み込み
• search 特定のクエリの検索結果の読み込み

通常、単一動画を埋め込むときのYouTube 動画 SWF の URLでは、http://www.youtube.com/v/と?の間にその動画の動画 IDを入れますが、再生するコンテンツの選択する場合は、videoseriesにして、 listType パラメータと list パラメータと組み合わせて使用します。

◇ YouTube動画検索の検索結果の動画のリストを読み込んで動画プレーヤーとして埋め込む

listType パラメータの値を search にして、 list パラメータの値を 検索キーワード にすると、YouTube検索で特定のキーワードを検索したときの検索結果の動画のリストを読み込んで動画プレーヤーとして埋め込むこともできます。
パラメータの「list」の値には、「検索キーワード」をいれます。
もし、複数のキーワードが入る場合は、キーワードどうしのあいだを「+」の記号でつなぎます。
下の動画の場合では、「Yolanda Adams+I Believe I Can Fly」というキーワードを指定しています。

◇ 特定のユーザーのYouTube公開動画の動画リストを読み込んで埋め込む

listType パラメータの値を user_uploads にして、 list パラメータの値を YouTubeユーザー名 （半角英数字）にすると、そのユーザーが公開しているアップロード動画の読み込みで埋め込むことができます。
下の動画の場合では、Porscheさんが公開しているアップロード動画を指定して埋め込んでいます。

◇ 再生リストを読み込んで埋め込む

listType パラメータの値を playlist にして、 list パラメータの値を 貼り付けたい動画の再生リスト ID にすると、その再生リストを読み込んで埋め込むことができます。
再生リストは、自分または別のYouTubeユーザーが作成した動画を集めたものです。
再生リスト IDとは、YouTubeの[ 再生リスト ]のページで「 共有 」ボタンをクリックしたときに表示されるhttps://www.youtube.com/playlist?list=PL********************************というアドレスの中のPLから始まる半角英数字の文字列です。
下の動画の場合では、こちらの再生リストを指定して埋め込んでいます。

関連情報ホームページURL：

https://developers.google.com/youtube/player_parameters?hl=en

前回のブログで、基本的な【 みんカラ 】ブログにYouTube動画を貼り付ける方法を紹介しましたが、YouTubeの動画埋め込みプレイヤーにはオプションのパラメータを YouTube 動画 SWF URL の末尾に追加することで、外観をカスタマイズしたり、動画を自動再生させたり、動画の再生開始位置や再生終了位置を指定する等といった裏技的な機能もあります。
（スマートフォンなどのように「Adobe Flash Player」がインストールされていないブラウザでは作用しないようですが。）
そこで今回はYouTubeの動画を貼り付ける際の裏技的なカスタマイズ方法（パラメータオプション）を紹介します。

まずカスタマイズする上で覚えなくてはならないHTMLコードの見方があります。
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中の http://www.youtube.com/v/ と ? の間にある ***********部分の１１文字がその動画のVIDEO_ID（動画 ID）で、それ以降の ●●=値 とあるのがパラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
動画 ID以降のパラメータは省略することもできますが、その際はYouTubeが設定したデフォルト（初期設定）値になります。 複数のパラメータを指定する場合、間に &（若しくは&） を入れます。
因みに上記例のパラメーターは、

• version=3は、ＡＳ３プレイヤーで表示する。
• hl=ja_JPは、言語コードは日本語。
• rel=0は、動画再生が終わったら関連動画を表示しない

と言う事を意味してます。
また、width="580" height="326"は動画埋め込みサイズを幅"580"、高さ"326"ﾋﾟｸｾﾙの大きさに設定することを意味してます。
allowfullscreen="true"はフルスクリーン表示を許可することを意味しています。

◇ 動画埋め込みプレイヤーのタイプを指定するパラメータ

YouTube 動画プレイヤーには、Flash形式の動画プレイヤーActionScript 2 player，ActionScript 3 playerとHTML5形式の動画プレイヤーHTML5 player の３タイプのビデオプレーヤーがあります。
HTML5 playerは、これに対応したブラウザでは「Flash Player」がインストールされていなくても動画を再生でき、また再生速度を変えることもできるといった機能もあるのですが、残念ながら【 みんカラ 】ブログでは<iframe></iframe>タグの埋め込みコードを使う事が出来ないためこの動画プレイヤーで表示させることができません。
しかしながらAS2プレイヤーとAS3プレイヤーの使い分けは今ののところ可能です。
AS2プレイヤーとAS3プレイヤーの見た目の違いは動画コントロールバーのデザインと高さが若干違う程度ですが、デザインや機能をカスタマイズすることも可能です。
2012年5月のYouTube仕様変更によりAS3プレイヤーがデフォルトになりましたので、version=3を指定しなくても（省略しても）ActionScript 3 playerで表示されることになりました。
逆にAS2プレイヤーで表示したい場合には、version=2を指定する必要があります。

◇ 動画コントロール バーの色を選択するパラメータ

このパラメータを使用すると、動画の下部に表示されているコントロール バーの色を選択することができます。現在では、動画コントロール バーの色がデフォルトでは黒っぽいdarkになっていますが、白っぽいlightにすることも可能です。有効なパラメータ値は、darkとlight。デフォルトでは、darkに設定されています。

◇ 動画コントロール バーの境界線の色と背景色を設定するパラメータ

AS3プレイヤーの場合、動画コントロール バーの背景色はdark色とlight色の２種類しか選べませんが、AS2プレイヤーに於いては背景色と境界線の色を個別に好みの色に指定することができます。

このパラメータはAS2プレイヤーでしか有効になりませんですので、AS2プレイヤーで表示するためのパラメータversion=2を追加指定する必要があります。
境界線の色を変更するには&color1=0xffff00の&color1=0x以降の６文字の半角英数字部分を、指定したい色の「#（ハッシュ）」を除いた16 進数形式の RGB カラー値に変更します。
動画コントロール バーの背景色を変更するには&color2=0x25b7c0の&color2=0x以降の６文字の半角英数字部分を、指定したい色の「#（ハッシュ）」を除いた16 進数形式の RGB ｶﾗｰ値に変更します。

◇ ビデオプログレスバーの色を選択するパラメータ

このパラメータは、ビデオプログレスバー（動画の進行状況バー）で使用される色を指定します。有効なパラメータ値は、redとwhite。デフォルトでは、ビデオプログレスバーの色はredに設定されています。
注：このパラメータは、AS2埋め込みプレイヤーではサポートされておりません。

◇ YouTubeのロゴが表示されないパラメータ

通常AS3プレイヤーのコントロール バーには、YouTubeサイトの動画単独ページにリンクするためのYouTubeのロゴが表示されていますが、modestbrandingパラメータの値を 1 に設定すると、これをコントロール バーに表示させないようにすることができます。ただし、動画を一時停止したときにユーザーがプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。デフォルトでは、 0 に設定されています。

◇ 動画コントロール バーを隠すパラメータ

デフォルト値は 2 です。
このパラメータは、動画の再生が開始された後、動画コントロール バーを自動的に非表示にするかどうかを指定します。隠れた動画オコントロール バーはマウスを動画上に移動すれば一時的に再び表示されます。
YouTube動画埋め込みプレイヤーのデフォルト（autohide=2）の動作では、プレーヤーのサイズが16:9または4:3のアスペクト比を持つならば、ビデオ・プログレス・バー（動画の進行バー）とプレーヤー・コントロール（再生ボタン、ボリューム コントロールなど）が自動的に表示が消えますが、さもなければ、プレーヤー・コントロールは表示されたままになります。
このパラメータを 0 に設定すると、プレーヤーのアスペクト比に関係なく、動画の進行バーとプレーヤー コントロールは動画が終了するまで表示されます。
このパラメータを 1 に設定すると、プレーヤーのアスペクト比に関係なく、動画の再生を開始して数秒後に、動画の進行バーとプレーヤー コントロールが非表示になります。これらが再び表示されるのは、ユーザーが動画プレーヤーにカーソルを合わせるか、キーボードのキーを押した場合のみです。

◇ 動画コントロール バーを表示するかどうかを指定するパラメータ

デフォルト値は 1 です。
このパラメータ値を 0 に設定すると、埋め込みプレイヤーのアスペクト比やマウスを動画上に移動するに関わらず、動画コントロール バーを非表示にできます。
注: <IFrame>タグによる埋め込みの場合は、パラメータ値が 1 と 2 の場合のユーザー エクスペリエンスはまったく同じですが、controls=2 を指定すると controls=1 よりもパフォーマンスがよくなります。現在は、動画のタイトルのフォントサイズが異なるなど、2 つの値の間でプレーヤーの表示にまだ多少の相違があります。ただし、両方の値の間の相違がユーザーにまったくわからなくなった場合は、パラメータのデフォルト値が 1 から 2 に変更される可能性があります。
動画コントロール バーが非表示になっても、動画上でクリックもしくは、キーボードのスペースキーをクリックすると再生/一時停止できます。音量調整はキーボードの↑/↓のキーを押して操作することはできます。戻す/進めるは←/→のキーを押して操作することはできます。動画上でダブルクリックすると全画面表示になります。

◇ キーボード操作を無効にするパラメータ

デフォルトは 0 です。
このパラメータ値を 1 に設定するとプレーヤーをキーボードで操作できなくなります。
キーボードによる操作は次のようになります。

• スペースキー: 再生 / 一時停止
• ↑上矢印キー: 音量を上げる
• ↓下矢印キー: 音量を下げる
• ←左矢印キー: 現在の動画を 10% 戻す
• →右矢印キー: 現在の動画を 10% 進める

◇ 関連動画を表示するパラメータ

デフォルト値は 1 です。
最初の動画の再生が終了したときに、プレーヤーに関連動画を表示するかどうかを指定します。



文字数制限になったので「Part３」に続きます。（笑）

ご無沙汰しております。
貧乏すぎて餓死しそうですがまだ生きています。（笑）
１０年前に買ったWindows XPのマイPCが動作が重たくなるのが嫌でセキュリティソフトを入れずに使い続けていましたが、先々月ウィルス感染してしまい、止むを得ずWindows 8.1 Update 64bitを導入。益々貧乏になりました。（笑）
この１ヵ月「Microsoftアカウント」「チャーム」「リボン」「タイル」「ピン留め」「ストアアプリ」何じゃそれ？って感じで格闘しておりました。多少慣れてきたところで、またWindows 10と格闘する予定です。（笑）

軍資金不足で走りネタもなく、ブログ更新もしていなかったですが、生存報告も兼ねてﾜﾀｸｼのみんカラブログでのPVレポートで一番人気のある？ネタでもしようかと思います。


Flash Player はウェブサイトの動画プレーヤーや広告など、無数のウェブサイトで利用されていますが、何かと脆弱性が問題視されていますね。
Mozillaは7月13日、Firefoxのアップデートにより、初期設定ですべてのバージョンのFlash Playerをブロックしたと発表。Facebookのセキュリティ責任者にも「AdobeはFlash終了を宣言すべき」と言われる始末。
YouTubeもFlashからHTML5に移行するなどの動きがあり、<object>タグによるFlash形式の動画プレーヤー埋め込みも非推奨として、今年から<object>タグによる以前の埋め込みコードの公開をやめてしまいました。
【 みんカラ 】ブログでは、<object ～></object>や、<iframe ～></iframe>や<script ～></script>などのHTMLタグは、強制的に無効になる設定になっており、HTML表記が文字列として表示されるだけでしたが、<embed>タグを使えば、従来ではYouTube以外の動画でも貼り付けられたのですが何時の間にかYouTube動画以外は<embed>タグも無効化されるようになってしまったようです。


そこで改めて、【 みんカラ 】ブログに動画を貼り付ける方法 の2015年度版を解説したいと思います。

まず、【 みんカラ 】ブログに動画を貼り付けるためには、張り付けたいYouTube動画のURLを入手しなくてはいけません。 ＵＲＬって何？と思われる方もいらっしゃるかも知れませんが、要するにインターネット上にある情報の場所（住所のようなもの）で、具体的には、「http://～」とか「https://～」となっているアドレスのことです。

１．まずは、貼り付けようとするその動画のYouTube単独ページにアクセスします。
（ブログやホームページに貼り付けられた動画からYouTube単独ページにアクセスするには、動画の上部にあるタイトルのリンクをクリックするか、動画の下部にあるYouTubeのロゴマークをクリックします）
動画の下にある [ 共有 ] と表示されたボタンをクリックします。すると、その下に[ 共有 ] と表示されるボタンの下のフォームボックス内に“https://youtu.be/***********”という内容のＵＲＬ（アドレス）が出力されますので、そのＵＲＬをコピー（右クリックして「コピー」を選択）します。

もう一つYouTube動画のURLを入手する方法としては、貼り付けようとする動画上で右クリックして、「動画の URL をコピー」「Copy video URL」もしくは、「動画の URL を取得」「Get video URL」を選択してもよいです。

２．次にブログの編集ページ本文中の動画を貼り付けたい所（行）でクリックします。

３．続いて、編集画面上の「動画」ボタンをクリックすると表示されるダイアログ（Explorer ユーザープロンプト）のフォームボックス内で右クリックし、「貼り付け」を選択し、ＯＫボタンをクリックします。

４．すると編集中の本文に という埋め込みコードが自動生成されます。
確認画面でチェックすると、実際には↓こんな感じで貼り付けられていると思います。


一応、これで動画の貼り付けが出来ているはずですが、このみんカラの動画投稿ボタンによる投稿方法では、今のところ動画埋め込みサイズが幅425 × 高さ355ﾋﾟｸｾﾙ の４対３のアスペクト比にしかなりませんので、アスペクト比１６対９の動画を貼り付けた場合、動画の上下に黒帯が生じされ、尚且つ動画下部にあるコントロールバーの右に全画面表示ボタンがあるにも関わらず、ボタンをクリックしても全画面表示出来ません。
そこで、もう一手間かけて視聴者に優しい貼り付け方法を紹介したいと思います。

【 みんカラ 】ブログ記事の幅は580ﾋﾟｸｾﾙにデザインされていますので、これに合わせて動画の埋め込みサイズやアスペクト比を変えることもできます。
変更する所は上記の埋め込みコードの内の width='425' height='355'の数字部分です。
例えばアスペクト比１６対９の動画を貼り付けたい場合には、数字の部分を半角英数字で width='580' height='326'に、アスペクト比４対３の動画を貼り付けたい場合は、 width='580' height='435'に変更すると記事スペース幅に合わせたサイズで貼り付けられます。

現在のYouTube埋め込みプレイヤーでは埋め込みサイズの幅と高さの比が１６対９もしくは４対３になると、コントロールバーが自動的に隠れる設定になっています。


YouTbe動画プレイヤーには動画下部のコントロールバー右にある全画面表示ボタンをクリックするとフルスクリーンサイズで表示する機能がありますが、上記のままではボタンをクリックしても何も変わりません。
フルスクリーンサイズ表示可能にするには、wmode='transparent'というコード部分を半角英数字でallowfullscreen='true'に変更、またはコードを追加すると全画面表示可能になります。
（左下の動画のコントロールバー右にある全画面表示ボタンをクリックしてみてください。）

逆に、ビデオ ＩＤの後ろに&fs=0というコードを追加することで、全画面表示ボタンをコントロールバーに表示させないことも可能です。（右下の動画）



いちいち文字入力するのが面倒くさいという人は、予め「メモ帳」などのソフトで といった雛形コードを作成・保存しておいて、ブログ編集本文中の動画を貼り付けたい所に直接 雛形コードをコピー＆ペーストし、その後 動画のビデオ ＩＤにあたる***********部分だけ換えるという方法もあります。この方法であればリッチ編集画面に於いても動画を貼り付ける事ができます。


この様に、YouTubeの動画埋め込みプレイヤーにはオプションのパラメータを YouTube 動画 SWF URL の末尾に追加することで、外観をカスタマイズしたり、動画を自動再生や繰り返し再生させたり、動画の再生開始位置や再生終了位置を指定したり、再生画質を指定する等といった裏技的な機能もあります。





次回のブログではYouTubeの動画を貼り付ける際の裏技的なカスタマイズ方法（パラメータオプション）を紹介します。