動画を表示する方法

この記事の公開年月日:  【1】動画をホームページで表示する方法 【2】YouTubeで動画を表示する方法

【1】動画をホームページで表示する方法

(0)動画をホームページで表示するためには、1つの動画を、次の4種類の拡張子の動画に変換する必要があります。

  • mp4
  • flv
  • ogv
  • webm

 また、動画を表示するウェブページが開かれた時、動画の内容を示す表題画像(動画のタイトル画像)を用意しましょう。動画の一場面のスクリーンショットなども表題代わりによく使われます。

(1)動画を(0)で列挙した拡張子に変換し、サーバーにアップロードしましょう。

(2)タグを作成し、htmlソースに貼付けましょう。

  • <video controls poster="動画のタイトル画像.png">
  • <source src="動画.ogv" type="videoogg">
  • <source src="動画.flv" type="videoflv">
  • <source src="動画.mp4" type="videomp4">
  • <source src="動画.webm" type="videowebm">
  • <p><a href="YouTubeのURL" target="_blank">YouTubeでご覧ください</a></p>
  • </video>

(3)サーバーの拡張子を動画に対応させましょう。サーバー apache の場合の mime type 設定例は、次のとおりです。

  • AddType audio/x-mp4      .mp4
  • AddType audio/mp4      .mp4
  • AddType video/flv      .flv
  • AddType application/ogg     .ogv
  • AddType video/ogg      .ogv
  • AddType video/webm      .webm

サーバーを再起動しましょう。

ホームページでの動画表示例 →

【2】YouTubeで動画を表示する方法

mp4ファイルの動画を一つアップロードすることで、ほぼすべてのブラウザーに表示することができます。

YouTubeでの動画表示例 →