"WebM"フォーマット変換/"Firefogg"の使い方/".htaccess"追加,タグ表現など解説 ......

| | コメント(0) | トラックバック(0)

 "WebM" 動画フォーマットやそれへの変換というテーマについては、もはや実践的なレベルでの確認が必要な時期に来ているような気がしている。
 そこで、やや手探りをしながらも、気になる一連の関連事項について、体験的に確認してみることにした。
 ところで、ウェブ上表示の "video" と言えば、かつて "audio" ( "ナレーション" )付きの "video" を力づくで作成したことがあった。

◆参照 <"ナレーション"付きの"アプリケーション向け動画操作マニュアル"の試作サンプル(当誌 2011.02.18)>

 参照していただければお分かりのとおり、"容量" の関係から小さくて見にくい上に、これは "QuickTime Player" という固有のアプリソフトを前提にしたものであった。
 Googleが言うところの「誰もが利用できる無料で高品質なWeb向けビデオフォーマット」ではないわけだ。
 目指すところは、"オープンソース" 系の "video" である。それだからこそ、"WebM" 動画フォーマットが気になるわけなのだ。
 とりあえず、"WebM" 動画フォーマットで作成した "自作サンプル" を吟味していただきたい。(※ ただし、現状で表示可能なブラウザは、"Firefox"、"Google Chrome" などに限られる......)
 ちなみに、"容量" の点では、前述の ".mp4" のそれ未満に圧縮されている。



"ナレーション" を付けた ".wmv" File から変換した ".webm" File 試作サンプル
( ※ 容量は、480×360 で 2.76MB )



 今日は、この "サンプル" を表示させるプロセス作業についてレポートしてみたい。
 作業は、大きく二つに分かれることになる。
【1】"WebM(ウェブエム)" 動画フォーマット変換作業。
【2】"WebM" ファイル表示に向けた環境設定、タグ設定。

【1】"WebM(ウェブエム)" 動画フォーマット変換作業

 先ずは、"WebM(ウェブエム)" 動画フォーマット変換についてである。
  自分は現在、 "Firefox" を常用していることもあり、"無償" の "Firefogg 2.2.21 - Make Web Video" (Firefox の "拡張機能" )を利用することにした。

◆参照 <Firefog インストール・サイト>

 このほか "無償" ソフトでは、<Miro Video Converter >や、
 "有償" ソフトでは、<Sorenson Squeeze> などがある。これについては、30日間のFree Trial版を試してみたが、使い勝手は悪くはなかった。"有償" ならではのことはある......。

【 "Firefogg" の使い方 】
 概略、以下のとおりであり、操作は簡単な方である。
(1) "Firefox" への "Firefogg" のインストールが完了しているみのとする。
(2) "Firefogg" は、"Firefox" の "拡張機能" であるため、<Firefox - ツール - Make Web Video>をクリックして起動させる。
(3) この時は "唯一" のボタンである<ファイルを選択>をクリックして、素材としたい自分のPC内から video ファイルを選ぶ。
 今回は、比較してみたかったこともあり、オーディオ付き video として、かつて "ナレーション" を加えるために作った ".wmv" ファイルを選択することにした。
(4) <プリセット:カスタム設定>
 今回は、<カスタム設定>を選択して下記の項目をそれぞれ設定したが、ドロップダウンリストから任意の選択をすることも可能。
(5) <エンコーディング範囲>はファイル全体なのでパス。
(6) <基本品質と解像度コントロール>
 <動画品質><オーディオ品質>はとりあえずそのままにしておき、<動画コーデック>では<vp8>を選択。すると、<オーディオコーデック>は自動的に<vorbis>が選択される。
 <動画の横幅><動画の縦幅>のそれぞれを用途に応じて入力設定する。
(7) <クリップのメタデータ>の各項目を入力する。必須ではない。
(8) <高度な動画変換コントロール>では<ノイズ除去フィルター>に念のためチェックを入れておく。
(9) ここで、<Ogg を保存>をクリックすると変換処理が始まり、完了すると、素材としたファイルがあるフォルダに、拡張子が ".webm" の変換完了ファイルが生成される。また、同時に "プレビュー" を閲覧することもできる。

【2】"WebM" ファイル表示に向けた環境設定、タグ設定
 変換後の "WebM" 動画ファイルの表示方法は次のようになろうか。

(1) 対応ブラウザ( "Firefox"、"Google Chrome" など)での表示
 変換済みの ".webm" ファイルを、ブラウザ上に "ドラッグ&ドロップ" すれば問題なく表示される。非対応のブラウザでは不可!

(2) ウェブページで表示させるには、ちょっとした "前提作業" が不可欠となる。ウェブページを置いているサーバが、".webm" ファイルを "video" ファイルとして受け容れなければならないからである。
 そのためには、<.htaccess>ファイルに次のような追加記述をすることが必要だ。

  AddType video/webm .webm

 この点は、"ePub" ファイルの場合と事情は全く同じであり、かつて次のように書いたことがあるので参考にしていただきたい。

◆参照 <Android SDK エミュレータで"自作ePub電子書籍"をダウンロード配布する試み成功(当誌 2011.04.11)>

(3) それで、最後は "html" スクリプトとなる。

 <部分の場合の例>(今回のページでの表示はこれに相当する)
  <video controls="controls" preload="auto" width="480" height="360">
  <source src="http://....../....../manual.webm" type='video/webm; codecs="vorbis,vp8"' />
  </video>

 <全体の場合の例>
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>HTML5 Video WebM ファイル再生</title>
  </head>
  <body>
  <video controls="controls" preload="auto" width="***" height="***">
  <source src="*****.webm" type='video/webm; codecs="vp8, vorbis"' />
  </video>
  </body>
  </html>

 昨日の話題、<YouTube、全動画をWebM形式に変換する>という推移が、 "なるほど" と感じられるような、そんな実感を深めた今日の作業結果であった...... (2011.06.12)













【 SE Assessment 】 【 プロジェクトα 再挑戦者たち 】








トラックバック(0)

このブログ記事を参照しているブログ一覧: "WebM"フォーマット変換/"Firefogg"の使い方/".htaccess"追加,タグ表現など解説 ......

このブログ記事に対するトラックバックURL: http://adhocrat.net/mt/mt-tb.cgi/1533

コメントする

2020年11月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          














関連サイトへのリンク


  • 電子書籍(eBooks)制作にフォーカスしたサイト
  • 明けない夜はないことを確信するサイト
  • Green(地球環境改善)にフォーカスしたサイト
  • ソフトウェア技術者やSEのための評価と育成、人事考課制度を考えるサイト
  • さまざまな業種・業態でご利用可能なモバイル活用の予約システム!
  • 創作小説『海念と保兵衛』のサイト
  • 創作小説『かもめたちの行方』のサイト
  • 当ブログ推奨の商品を展示したAmazon ストアー!
  • 当AdhocBlogブログの過去のエントリー
  • 株式会社アドホクラット当時のサイト

★売れ筋! No.1!
家庭用"放射線測定器"

日本通信 bモバイルWiFi ルータ+1 ヶ月定額SIM BM-U300W-1M
価格:¥ 20,208
国内配送料無料 Amazon





このブログ記事について

このページは、yasuo hiroseが2011年6月12日 00:01に書いたブログ記事です。

ひとつ前のブログ記事は、
 「米Googleの"WebM(ウェブエム)"は,HTML5 Videoでの"デファクトスタンダード"に? ......
です。

次のブログ記事は、
 「"シンプル&スピーディー"の大原則に立ち返った"7notes mini (J) for iPhone"! ......
です。

最近のコンテンツは、
 インデックスページ
で見られます。

過去に書かれたものは、
 アーカイブのページ
で見られます。

年月別アーカイブ

最近のトラックバック