2014.12.04 ホームページに影像を追加
今までは文章と写真だけのホームページでした。 2010年2回目のヨーロッパアルプスをツーリングしたときの映像を納めたテレビ用のDVDがあるのですが、これを何とかしようと格闘した顛末です。
A&L 夫妻のテレビ用に編集したDVD
「再びヨーロッパアルプス（2010年夏の旅）」でオートバイの旅をしました。 その時、A&L 夫妻はカナダからの参加者で、タンデムライドでした。 ご主人か運転しながらヘルメットに装着したビデオカメラで映像を、ご婦人は後ろに乗って、カメラで写真を撮っていました。
2010年末にカナダからの郵便物が届き、中にはDVDが入っていました。 ご夫妻の写真と映像を1時間のビデオに編集し、音楽を入れたDVDにして送ってくれたものです。 このDVDの一部を公開する了解を得たので、早速、ホームページに加えようと思い立ちました。
映像の規格調べ
ホームページはすべてテキストで成り立っており、テキストに写真や映像を埋め込んでいますが、テレビ規格の映像をホームページで見ることのできる規格に変換しなければなりません。 まったく知識がなく、且つお金を使わない主義としてはインターネットが頼りです。 早速「ビデオの変換」をキーワードにまずはお勉強です。 インターネットの世界では「動画の変換」が通りが良いようです。
まずはDVDを丸ごとHDにコピーして中を覗いて見ました。
フォルダー VIDEO_TS
内容 VIDEO_TS.IFO、 VIDEO_TS.VOB、 VTS_01_0.BUP、 VTS_01_0.IFO、 VTS_01_0.VOB、 VTS_01.1VOB、 VTS_01_2.VOB、 VTS_01_3.VOB
映像はVOBに入っており、ほかのファイルはビデオデッキで映像を見れるように制御する情報のファイルのようです。
次に調べるのは、ホームページで動画（映像）として扱える規格ですが・・・。 いっぱいあります。 その中で、主流となっている「MP4」に変換すれば良いとわかりました。
映像の変換ソフト
「動画変換ソフト フリー」で検索すれば多数の無料ソフトがあります。 「VOB⇒MP4」への変換は主流の変換なのでどのソフトにも備わった機能です。 レビューを参考に安心してダウンロードできるところから3つのソフトを試用してみました。 VTS_01_0.VOBファイルは1GBほどのファイルですがMP4に変換すると150MB～300MBになりました。
変換した映像ファイルをクリックするだけでパソコンの標準ソフトで見れるようになり、これでホームページ用の映像ファイルつくりの第1関門を通過しました。 まだいくつかの関門があるので試用は続きます。
第2関門 映像を好きな長さに切れるか？
VTS_01_0.VOBファイルは20分ほどの映像ファイルです。 これをそのままではホームページのサーバーの容量はいくらあっても足りません。 またこんな大きなファイルはダウンロードに時間がかかりすぎますし、また名画でもない映像を20分も見る人はいないでしょう。 エッセンスを長くて数分、できれば15秒から20秒だけ流すのがインターネット動画の趣旨でしょう。 このVOBファイルを好きなところで切れる機能があるかどうかが第2の関門です。
試用したうちのひとつはDVDを丸ごと変換するのが趣旨のソフトのようで操作がシンプルですぐ使いこなせますが、この映像を切る機能も、また映像の鮮明さを多少犠牲にしても小さなファイルを作れる機能もなく、この時点で脱落。 ほかの二つは始点と終点をカーソルで設定すれば好きなところで映像をちょん切る機能を持っていました。
第3関門 ファイルサイズを小さくしたときの映像の劣化
変換をすると映像はどうしても劣化します。 これはやむをえない現象ですが、変換したわずか10秒の映像ファイルでも6MBから10MBほどとまだ大きい。 もう少し小さなファイルサイズとするため、画面の大きさを変えてみたがこれはほとんど影響がなかった。 DVDのフレームレートは29.97Hzでこれを25Hzに下げれば多少小さくなる。 一方ビットレートを下げるとこれは大幅にファイルサイズが変化する。 画像の劣化が目立たないところまでビットレートを下げれるのが最後に残ったソフトでした。 これでホームパージ用の映像の準備が整いました。
第4関門 これからはHTMLとの格闘
出来上がった映像ファイル（以後動画という言葉を使います）をマウスでクリックすれば見れますが、これをどうHTMLで表現するかが問題でした。 HTML5の動画の「video」タグが今一般に使われているHTML4にはありません。 無知にも「video」タグを使わずに何とかならないかと試行錯誤。
まず試したのが「img」タグ。 これは画像を表示するだけであり、「うん」とも「すん」とも言わず、表示も「×」が出るだけ。 失敗でした
次に試みたのがクリックするとほかのページに飛ぶ「a」タグ。 パソコン上のホームページでこのアンカータグをクリックすると見事に映像が出てきてみることができました。 気をよくして早速サーバーにあるホームページに組み込み試してみるが、パソコンではうまく機能したのに、サーバに置いて試すと動かず。 サーバーではごまかしが利かないようです。 これも失敗でした。
ものは試しとHTML5の「video」タグを使ってみたら案の定私のパソコンでは動かず。 HTML5のブラウザーだけになれば、将来は「video」タグの利用が当たり前になるでしょうが、利用される端末のブラウザーがすべてHTML5対応になるのはまだまだ先のことです。 これもまだ使えません。
もうひとつ、最後にインターネットで動画がよく見られているYOUTUBEを使ったブログを参考に「iframe」を使って試してみたが、動かず。 Biglobeでは提供していないようです。 失敗
世に広まっているYOUTUBEの動画サイトを利用
最後の手段として動画の参照先にYOUTUBEサイトを利用してみた。 YOUTUBEサイトに自分のアカウントを作り、動画をアップロード。 そして「iframe」タグを使い試してみたら、私のパソコン上のHTMLではやはり動かず。 失敗かと思ったが試しにサーバーにアップロードしてからインターネット上で試したら見事に動画が出て動いた。 成功！
有料のサーバーでしたら、動画を自分のホームページ上に置き、皆さんに提供できるのですが、Biglobeのホームページでは動画を自分のホームページに置けず、苦肉の策でした。
初めての動画です
HTLM5 ワールド・ワイド・ウェブ・コンソーシアム(W3C)がついに勧告
つい先日（2014年10月28日）にワールド・ワイド・ウェブ・コンソーシアム(W3C)はHTML5を勧告として公開しました。 HTML5は定義が完了してから2年たちますが、公開されておらず、継子扱いでしたがようやく普及が始まるでしょう。 「Video」タグが使えるのはもう少し先になるのでしょうか。
2020年 HTLM5が使えるので、タグを「video」に変更
6年たってパソコンはWindows10。 世の中はHTML5が標準になっています。 ビデオを使いやすい「video」に変更しました。
