動画の埋め込み

動画の埋め込み方法について説明したページです。通常のYouTubeへのアップロード、動画編集ソフトを利用した動画の編集やアップロード、YouTubeを利用せずにhtmlへ埋め込む動画の公開方法等をご紹介しています。

動画の作成方法

 動画はビデオカメラやデジタルカメラで撮影し、殆どの場合はUSB経由等で取り込めます。USBでパソコンと接続し、ファイルのコピーで取り込むか専用のアプリケーションを使って取り込む事が出来ます。

 パソコンのデスクトップを撮影するためにはキャプチャソフトを使います。キャプチャソフトは有料、無料等様々ですが、広告がなく無料のソフトウェアとしてアマレココをお奨めします。ある程度のパソコンのスペックがあればゲームの動画等も綺麗に撮影出来るため、通常のデスクトップの画面を撮影するために使うのであれば殆どの場合、問題なく撮影出来ると思います。

 アマレココの詳細については「アマレココについて」をご参照下さい。

 又、アマレココの作者のページではWindows7以降はアマレコTVを推奨しています。アマレコTVの詳細については「アマレコTVについて」をご参照下さい。

動画の編集方法

 動画を編集するためにはソフトウェアが必要です。無料から有料のものまで様々ですが、動画の編集は専門用語等も出てきて慣れるまで大変なため、最初は機能が少なくても使いやすいものが良いと思います。

 このため、簡単に編集するのであればムービーメーカーをお奨めします。ムービーメーカーは機能は少ないですが、タイトル、テキスト、クレジットを追加したりアニメーション効果を追加したり出来て、ホームページで公開するための最低限の機能が揃っており、操作も簡単で初心者向けです。

 ムービーメーカーの詳細については「ムービーメーカーについて」をご参照下さい。

 少し慣れてきたり、動画を主体とするホームページを考えているならムービーメーカーでは物足りないかもしれません。その場合は有料になりますが、サイバーリンク社の「PowerDirector icon」をお奨めします。PowerDirectorはムービーメーカーと比較してタイトルやテキスト等の表現が豊富で、様々なエフェクトを追加可能であり、2つの動画を並べて配置したり、逆再生等も出来ます。

動画の挿入[html/タグ]1

 PowerDirectorはブルーレイドライブ等を購入した際に制限付きですがライセンスが付属している場合があります。動画編集に慣れるまでは初心者向けのムービーメーカーをお奨めしますが、物足りなくなったり動画を主体とするサイトの場合はPowerDirectorのような高機能ソフトウェアを活用する事をお奨めします。以下で無料体験版もダウンロード出来ます。

icon icon

YouTubeで公開するための準備

 動画はファイルサイズも大きく、ネットワーク帯域も多く使うため、動画を多くアップロードして公開するとレンタルサーバーによってはディスク容量や転送量の制限を超えてしまう可能性があります。

 このため、YouTubeを活用すると便利です。YouTubeにアップロードした動画をホームページからリンクするとホームページで公開出来ますが、ファイル自体はYouTubeにあるためレンタルサーバーのディスクもネットワークも使わずに動画を公開出来ます。

 YouYubeに動画をアップロードするためには「YouTube」で右上のログインから行いますが、Googleのアカウントが必要です。アカウントを持っていない場合はログインをクリックした後に表示される画面で「アカウントを作成」をクリックしてからアカウントを作成します。余りアカウントは作りたくないという方もいると思いますが、Googleのアカウントはウェブマスターツールやアナリティクス等、ホームページを運用していく上で有用なツールを使う時に必要になるため、ぜひ登録をお奨めします。

 ログイン後は右上のアップロードをクリックします。

動画の挿入[html/タグ]2

 以下の画面で名前等を入力しても大丈夫ですが、プライバシーを公開したくない場合は赤枠部分でリンクされている「ここをクリック」をクリックします。

動画の挿入[html/タグ]3

 以下の画面になるため登録したいチャンネル名と性別を入力して「チャンネルを作成」をクリックします。

動画の挿入[html/タグ]4

 チャンネルとはテレビのチャンネルと同じで、ユーザーや企業が動画を配信するためのIDです。アカウントに1つしか作成出来ないため、ホームページ用のチャンネル名にするよりは、ホームページ以外でも使えるように自身のハンドルネーム等にした方がよいと思います。又、チャンネルの作成はFireFoxのバージョン21.0では正常に出来ませんでした。InternetExplorerでは出来たため、チャンネルが作成出来ない場合は別のブラウザで試してみる事をお奨めします。

YouTubeへのアップロード

 ムービーメーカーを使っている場合、YouTubeでチャンネル作成後は以下の赤枠部分を選択します。

動画の挿入[html/タグ]5

 以下では「YouTube」を選択します。

動画の挿入[html/タグ]6

 以下では通常は推奨を選択すれば問題ありません。解像度を変更したい場合は別のサイズを選択します。

動画の挿入[html/タグ]7

 以下の画面ではMicrosoftのアカウントへサインインが必要です。アカウントを持っていない方は新規登録が必要です。

動画の挿入[html/タグ]8

 以下の画面ではチャンネルを作る時に使ったGoogleのアカウントでサインインします。

動画の挿入[html/タグ]9

 以下ではタイトル、説明、タグを全て入力し、カテゴリと許可は選択が必要です。ホームページで公開する上ではタイトル、説明、タグは同じでいいと思います。カテゴリは選択なので適切なカテゴルを選択してください。許可はホームページで公開する上ではパブリックにします。全て入力、選択し終わった後に「アップロード」をクリックします。

動画の挿入[html/タグ]a

 「アップロード」をクリックした後は以下の画面で「オンラインで視聴」をクリックして正常に動画が見れるか確認します。

動画の挿入[html/タグ]b

 アップロード後数分は正常に見れないため、数分してからブラウザの更新をクリックして確認する必要があります。

YouTube動画のhtmlへの埋め込み

 アップロートして動画が再生出来る事を確認した後は赤枠の「共有」→「埋め込みコード」を選択し、緑枠に表示されたコードをhtmlの表示したい部分に張り付けます。

動画の挿入[html/タグ]c

 上記の通り実施した動画が以下の通りです。※音が出ます

 YouTubeでのチャンネル作成は1度行えばいいため、次からの動画はムービーメーカーでアップロードしてhtmlに埋め込むだけで済みます。

ムービーメーカー以外のYouTubeへのアップロード方法

 PowerDirectorにも同様な機能があり、やはりタイトル、説明、タグを入力してカテゴリや許可の選択をしますが、こちらはYouTubeへのログインだけで済みます。

動画の挿入[html/タグ]d

 又、YouTubeにログイン後にアップロードをクリックすると動画ファイルをドラッグ&ドロップする画面になるため、ファイルをアップロード後、やはりタイトル等を入力しても同様に公開出来ます。

動画の挿入[html/タグ]e

 動画を編集せずにそのままアップロードするのであれば、この方法が一番簡単です。

ホームページに動画をアップロードして公開するための準備

 YouTubeで公開するとレンタルサーバーのディスク容量もネットワーク帯域も使わないためお薦めですが、YouTubeではJavaScriptが有効でないと再生出来ません。JavaScriptが無効な場合も再生するようにしたい、アカウント登録したくないといった場合はレンタルサーバーにアップロードして動画を公開する事も出来ます。

 ムービーメーカー等の動画編集ソフトでMPEG4形式で保存してそのままアップロードする事で公開も出来ますが、表示出来ないブラウザも多くあります。このため殆どのブラウザが対応しており、動画も綺麗に表示されるフラッシュで公開する方法をご紹介します。フラッシュの拡張子はflv等で一時Windows8のスタート画面からブラウザを使う場合にデフォルトで使えない状態でしたが、今は使えるようになっています。暫くはFLV形式が一番表示がされ易い形式だと思います。

 まず準備ですが、ムービーメーカ等で動画を保存する場合は最高画質で保存します。その後、変換ソフトウェアを利用してFLV形式に変換します。FLV形式に変換する場合は幅、高さやビットレート等を指定し、動画のサイズが大きくならないようにする必要があります。

 MPEG4形式からFLV形式に変換出来るフリーのソフトウェアの例として「Freemaker Video Converter」があります。ムービーメーカー等で保存したMPEG4の動画をドラッグ&ドロップで読み込んで「変換する」をクリックして幅や高さ等を指定してFLV形式に変換出来ます。

動画の挿入[html/タグ]f

 但し、このソフトウェアを私がインストールした時はパソコンの環境がかなり変更されました。例えば検索サイトが自動的に変更される等です。今では変わっている可能性がありますが、これらを元に戻すのはかなりスキルが必要なため、利用される場合は留意して下さい。

htmlへの埋め込み

 Freemaker Video Converterで「ウェブページに動画を埋め込みます」をチェックしているとFLV形式の動画と共にswf形式のファイルが作成されます。

動画の挿入[html/タグ]g

 htmlではこのswf形式のファイルを以下のようにタグで指定します。

【動画のhtmlへのタグ埋め込み例】
<object id=0 type="application/x-shockwave-flash" data=image/create_movie_insert_1.swf width=560 height=316>
<param name="movie" value=image/create_movie_insert_1.swf>
<param name="FlashVars" value="flv=create_movie_insert_1.flv&title=滝の動画&margin=0" />
</object>

 赤字部分はFreemaker Video Converterで出力時に指定した幅、高さ、出力されたswf、FLV形式の動画ファイルを記述します。青字部分は題のため、自分の好きな題を付けられます。

 上記でレンタルサーバーにアップロードしてhtmlに埋め込んだ動画が以下です。※音が出ます。

 パソコンではここに動画が表示されます。スマートフォンではFLV形式は表示されないため、パソコンから見て下さい。

 幅、高さ、ビットレート等はFreemaker Video Converterのプリセットエディタで指定している通りです。ビットレートは悩むと思いますが、余り大きくするとファイルサイズやネットワークの帯域を多く使います。このため、動画サイズに合わせて変更が必要です。今回の動画では768Kbpsにしています。256Kbps等にするとファイルサイズやネットワークの帯域の利用は抑えられますが、動画の劣化が激しくなる可能性があります。

 又、自動的に再生を始めたい場合は2つ目のparamに&autoplay=1を追加します。記述は<param name="FlashVars" value="flv=flvファイル名&autoplay=1&title=滝の動画&margin=0" />となります。

 再生が終了した後、自動的にリプレイさせたい場合は同様に&loop=1を追加します。記述は<param name="FlashVars" value="flv=flvファイル名&loop=1&title=滝の動画&margin=0" />となります。

 2つ共追加すると自動的に再生し、リプレイします。

参考動画

 PowerDirector等、有料の編集ソフトを使うと演出を盛り上げる効果があります。以下はかなり以前に作成した動画で画質は悪いのですが、エフェクトを多用し、ゲーム内で演奏した音楽も取り込んでいます。※音が出ます

 因みに、このゲームはロードオブザリングのオンラインゲームです。今では日本でやっていませんが、アメリカでは人気のゲームで、そのメンバー募集用に作成した動画です。

 私はこれまでも簡単な動画編集はしていたのですが、この時初めて本格的に動画編集ソフトを使いました。

 動画の編集をした事がない方は非常に難しく感じると思いますが、素人の私にもある程度は出来たのでぜひやってみて下さい。

  • このエントリーをはてなブックマークに追加