動画ファイルをhtmlに埋め込む
本日、動画ファイルを、htmlに埋め込みました。
フラッシュ(swf)やGIFアニメーションではない動画ファイルをhtmlに埋め込んだのは、今回がはじめてです。
※ 再生するには、三角の再生ボタンを押してください。
※ 上の動画の内容は、VirtualDubというツールを使って、動画を編集(不要な部分をカット)している操作の手順です。
※ 操作手順の動画は、CamStudioというソフトで作成しています。
ことの経緯
新狭山北口商店会の行事で撮影された動画ファイル(avi)をお預かりしたのです。
お預かりした動画は、行事の途中で唐突にはじまり、唐突に終わっています。
編集して、アップロードしなくては。
- 動画ファイルから、「一曲分(テネシーワルツのみ)」を切り出し、
- ファイルサイズを小さく(最終的に約100分の3)し、
- ファイルを変換(avi→wmv)し、
- htmlを書き、
- アップロードしました。
一筋縄で行かない。
flaファイルで成功せず、wmvでやっと成功したり、
変換ソフトのあたりはずれ?があったり・・・。
最初のファイルの作成時間が13時。
最後のファイルの作成時間が21時。
音声ファイルの編集を含めると、8時間、ぶっとおしでやっていたらしい。
結局朝からずっと、新狭山北口商店会のページに取り組んでいたわけで・・・。
たはぁ~。
前任の方は動画ファイル、すんなりやってらしたようです。すごいなぁ・・・。
以下は、いくつもの分岐点で、失敗しては別の道を選択し・・・の連続の結果、
最終的に、わたしが成功した道筋です。
動画編集ソフトを入手
- 最初に見たページは、以下。 VirtualDub 動画I編集ソフト
- 誘導されて、以下の英語サイトにて、V1.9.0 (32-bit)をダウンロード。 VirtualDub download (at SourceForge) – virtualdub.org
- 32bitと64bitがあったので、あれ?どっちだっけと。
コントロールパネルを確認。32bitでした。
- 以下のサイトで日本語化パッチを入手。 VirtualDub localization patch
- VirtualDub をインストールしたフォルダに、日本語化ファイル(exe)を入れ、
ダブルクリックで実行して、日本語化完了。
このとき、VirtualDubと日本語化ファイルのバージョンを合わせないとエラーになります。(なりました)
動画編集ソフトで編集
- VirtualDub をダブルクリックして実行。
- [ファイル]メニューの[ビデオファイルを開く]で、目的のaviファイルを指定。
- [編集]メニューで、範囲の始点と終点を設定。
- [編集]メニューで、[選択範囲を切り出す]。
- [ファイル]メニューで、[名前を付けて保存]。
動画圧縮ファイルで圧縮
- VectorでBatchDOO!を入手。
- BatchDOO.exe をダブルクリック。
- 圧縮したいファイルを、BatchDOOにドラッグ。
- [おまかせ]の中から、[PC向け低画質(320×240)(MPG)]を選択。
- [GO!]をクリック。
ファイル変換
- VectorでAny Video Converter Freeを入手。
- VideoConverter.exe をダブルクリック。
- [動画を追加]をクリック。
- 変換したいファイルを選択。
- [出力形式]を選択。
- Windows Media Player で使用する場合→ wmv
- Real Player で使用する場合→ ram
- Flash Video Player で使用する場合→ flv
htmlに埋め込む
<embed src="TennesseeWaltz.wmv" type="video/x-ms-wmv" AutoStart="false" ShowDisplay width="320" height="240"> </embed>
※ 再生するには、三角の再生ボタンを押してください。
※ 再生の工夫をもう一歩進めたいですが、力尽きました。
連日すごいことをやってますね。
文字コード・・・動画のエンコード・・・・詳しい人がいるけれど、きいてもわからないです。
おだんごちゃんは、誰にもきかずに、調べてやるの???
その詳しい人に、「つまったら、誰に聞くの?」と聞いたら、「人に聞くのは、いやなので、とことん、調べる」と答えてはった。おだんごしゃんもそのタイプね。あきらめずにすごいわ。
こうしたことって、人に聞いても、”ピンポイント”での”正しい答え”は返ってこない。
ネットで検索した方法も、そのとおりにやって、ひとつとしてすんなり行かないのだから。
自分で試行錯誤するしかないね。
最後はさすがに気分が悪くなってきて、
「うう、吐きそう・・・」
などと言いながら、辛抱して続けた。
最後、トンネルの出口が明るく見えたときはすごくうれしかった。
動画のアップロードは長年の目標のひとつだったし、
商店会の方がせっかく撮影してくれたのに、って思いも今回あったし、
こういうときに勢いでやらなきゃ、一生やらないな。