※ 追記 2016年10月03日
現在のみんカラでは動画の埋め込み方法に変更がありましたので、これに対応した方法は
こちらの記事をご覧ください。
最近では自動車メーカーなども新車のプロモーションに『
YouTube』を活用するなど、動画共有サイトはメディアの一つとして市民権を得た感があります。
また、多くの方々がホームページやブログでも動画情報や車載映像などを公開しており、インターネットは、読む事から観る事,聴く事,参加する事,発信する事が出来るメディアです。
そこで今回は、【 みんカラ 】ブログへの正しい?動画の貼り付け方を御紹介します。
【 みんカラ 】ブログに動画を貼り付ける方法としては、
A.ブログ編集ページにある動画ボタンをクリックして、Explorer ユーザープロンプト(スクリプト プロンプト)の入力欄に
動画のURLをコピペ(コピー&ペースト)する方法と、
B.編集ページ本文に、直接
埋め込み用のEmbed コードをコピペする方法と2つの方法があります。
Aの方法の場合、簡単ではありますが今のところYouTube 限定で、しかも動画埋め込みサイズが幅425 × 高さ355 の4対3のアスペクト比でしか選べず、16対9の動画の場合、そのままでは動画の上下に黒帯が表示されてしまいます。また、フルスクリーン表示できないなど自由度がありません。
ですから私は
Bの方法をお奨めするのですが、【 みんカラ 】ブログに動画を貼り付ける場合に注意することがあります。
まず、ブログ編集ページの下の方にある『HTMLタグ』欄の『有効』にチェックマークが付いている事を確認します。(チェックマークが付いていなければ、クリックしてHTMLタグを有効にします)
次に、
【 みんカラ 】ブログでは、<object ~></object>や、<iframe ~></iframe>や<script ~></script>などのHTMLタグは、強制的に無効になる設定になっており、HTML表記が文字列として表示されるだけです。
『
Soapbox』などのように、埋め込み用のHTMLコードに<embed ~></embed>タグを使っているものは、コードをそのままコピペするだけで問題はありませんが、
『
eyeVio』や『
zoome』などの動画を貼り付ける場合、<iframe></iframe>や<script></script>タグを使った埋め込みコードでは貼り付けできません。
『
YouTube』 や『
MOVIE+CASTER』などのように、一般的な動画共有サイトの多くでは、<object ~></object>タグを埋め込み用のコードとして用いていますが、【 みんカラ 】ブログの場合、これをそのままコピペすると、上記の理由で動画の前後に<object ~></object>という文字列として表示されてしまいます。
そこで、コピペした後その部分を削除して下さい。
と、ここまでは 実行されている方は多いのですが、
<param ~></param>タグ部分もできれば削除して、<embed ~></embed>タグ部分だけを残すようにして下さい。
<param ~></param>タグは削除しなくても映像は表示できますし、「Internet Explorer」や「Safari」では問題なく表示できますが、「Firefox」などのブラウザで見ると、バグにより、ブログ全体のレイアウトが崩れます。
依然として「Internet Explorer」はブラウザとしてのシェアが高いですが、徐々に「Firefox」との差が少なくなっているので、ユーザビリティーを考慮して、この部分も削除する事をお奨めします。
◇ 例
実線部分を削除します。
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/Jzlyb7JMpcg&hl=ja&fs=1&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/Jzlyb7JMpcg&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="480" height="295"></embed>
</object>
これで【 みんカラ 】ブログへの正しい?動画の貼り付け方が分かりましたでしょうか?
分かったところで?、次にYouTubeの動画を貼り付ける際の裏技的なことを紹介します。
半年前に、私のこのブログで
YouTubeについて書いた事がありますが、その後YouTubeはさらに進化しており、「埋め込みプレイヤー」の簡単なカスタマイズも、その動画の単独ページにアクセスして、ページ右の「埋込み」と表示されたコード欄の右にある
「カスタマイズ」ボタンをクリックすると、関連する動画を読み込むか否か、境界線の表示、プレイヤーの色、プレイヤーのサイズ等を選ぶ事が出来、HTMLの知識がなくてもそのコードをコピペするだけでカスタマイズ出来るようになりました。
動画投稿に関しても従来はアップロードを開始してから完了するまで、どれくらいの時間がかかるのか目安がありませんでしたが、『
veoh』や『
eyeVio』のように経過時間を示すバーが表示されるようになりました。
また『
eyeVio』のようにハイビジョン画質表示や16:9 のワイド画面にも対応するなど、画質や使いかっても改良され、新機能も追加されました。
そこで前回紹介してないYouTube「埋め込みプレーヤー」のカスタマイズ方法(パラメータオプション)を御紹介します。
まずカスタマイズする上で覚えなくてはならないHTMLコードの見方があります。
<embed src="http://www.youtube.com/v/***********
&hl=ja&fs=1&rel=0
" type="application/x-shockwave-flash" allowfullscreen="true" width="480" height="295"></embed>
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中のhttp://www.youtube.com/v/と
&hl=ja
の間にある
***********
がその動画の
VIDEO_IDで、それ以降の
&○○=値
とあるのが
パラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
VIDEO_ID以降の
パラメータは省略することもできますが、その際はYouTubeが設定したデフォルト(初期設定)値になります。
因みに上記例のパラメーターは、
・
&hl=ja
は、言語コードは日本語。
・
&fs=1
は、フルスクリーンボタンを表示する。
・
&rel=0
は、関連する動画を読み込まない。(動画の再生が完了した後、関連する動画を表示しない。)
と言う事を意味してます。
◇ 再生画質を指定するパラメータ
&ap=値
※追記
YouTube仕様変更により、現在このパラメータは無効になりました。
前回にも高画質(HQ)モードで再生させる方法を紹介しましたが、その後YouTubeがハイビジョン画質(HD)での再生にも対応してきましたので、そちらの値も紹介します。
YouTubeでは、アップロードされた元の動画ファイルを、標準画質版、高画質版、HD画質版など幾つかにエンコードしています。
最近、「埋め込みプレーヤー」の改良で動画下のコントロールバーからもHQ画質版やHD画質版での再生が選択できるようになってきているので、わざわざパラメータで画質を指定する必要性は少なくなっていますが、古い動画ファイルなどでは、高画質版が存在するにも拘らず、コントロールバーに表示されない動画もあるので、再生画質指定することで直接高画質モードで再生できます。(特に音楽ビデオでは、より高音質・ステレオで再生できるのもメリットです。)
パラメータ値 | 画 質 | ファイル形式 | 音 声 | 解像度(4:3) | 解像度(16:9) |
初期設定 | 標準画質 | flv: FLV1+mp3 | モノラル | 320x240 | 320x180 |
&ap=%2526fmt%3D34 | 新標準画質? | flv: H264+AAC | ステレオ | 320x240 | 320x180 |
&ap=%2526fmt%3D6 | 旧高画質 | flv: FLV1+mp3 | モノラル | 480x360 | 480x270 |
&ap=%2526fmt%3D18 | 高画質iPod用? | mp4: H264+AAC | ステレオ | 480x360 | 480x270 |
&ap=%2526fmt%3D35 | 新高画質? | flv: H264+AAC | ステレオ | 480x360 | 640x360 |
&ap=%2526fmt%3D22 | HD画質 | mp4: H264+AAC | ステレオ | 960x720 | 1280x720 |
※全ての動画に、それぞれ上記画質版があるわけではありません。
(元々の動画ファイルが低画質の場合には、高画質版は無いこともあります。その動画ファイルが無い場合は、『We're sorry,this video is no longer available.』と表示されます。)
【 HD画質版 】
<embed src="http://www.youtube.com/v/_6rj5jisB7g
&hl=en&fs=1&rel=0&ap=%2526fmt%3D22
" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
【 標準画質版 】
上がHD画質版、下が標準画質版です。共にプレイヤーの埋め込みサイズが、幅"480",高さ"295"なので差が判り難いと思いますが、動画下のコントロールバーにあるフルスクリーンボタンをクリックして全画面表示させて比較すると違いがハッキリすると思います。
逆に言えば【 みんカラ 】ブログでは、スタイルシートで変更しない限り ブログの幅が550px ~575pxなので、全画面表示させなければHQ画質で充分であり、HD画質指定するとパソコンの性能や接続環境によっては反ってユーザビリティーが悪くなるので、「高画質」イコール「良い」とは限りません。
◇ 再生開始位置を指定するパラメータ
&start=値
動画の再生開始位置を
秒単位の値で指定することができます。
このパラメーターを設定すると、例えばサーキット車載映像の2LAP目から再生させるという事なども可能になります。
<embed src="http://www.youtube.com/v/CLKnliJC9RU
&hl=en&fs=1&rel=0&start=34
" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="400"></embed>
※動画の始めから再生したい時は、キーボードの
←キー を押すと最初から再生されます。
◇ 動画情報の表示を設定するパラメータ
&showinfo=値
最近のYouTube「埋め込みプレーヤー」の動画には左上にタイトルや動画評価の☆印が表示されるようになったのをお気付きでしょうか?
この動画情報は表示しないようにすることが、showinfoパラメータの値を
0
に指定することで設定できます。
<embed src="http://www.youtube.com/v/UqeBIcC7o6U
&hl=en&fs=1&rel=0&showinfo=0
" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
他にもアノテーションやキャプションの表示設定パラメータなどもありますが、詳しくは下記サイトを参照して下さい。
- 関連情報ホームページURL:
-
http://code.google.com/intl/en/apis/youtube/player_parameters.html 英語
http://code.google.com/intl/ja/apis/youtube/player_parameters.html 日本語