動画のWebページ掲載   09/10/4 16/9改定 安倍

このページは古く、FLASHに関する記述が多いが、FLASHはスマホで見えないので急速に消えつつあるようだ。
動画は容量が大きいのでWebページに掲載するにはYouTube/Storageを利用するのがよく、こちらのページを参照してください。

  動画形式の種類と違い(ネット解説)
  • ネットで見かけるムービーのファイル形式は、WMV、MP4、AVI,、FLASH、など多数あるが、MP4が主流になりつつある。 
  • AVIはMS社がAppleのMOVに対抗して急遽作った形式で、可逆圧縮で劣化が小さいがStreamingができないので編集作業で多く使わ
    れ一般には殆ど見かけない。
  • 低圧縮のWMVは高画質で企業関係に広く使われる。
  • MP4はVISTA/IE9 で見えないことに留意が必要だが、VISTAはMS社のサポートは終了し市場はWin10/IE11が主流になりつつある。
    その環境で ネット上ではMP4が画質/容量のバランスから多く使われている。
  • HTML5が普及し、新たな<video> <audio>コードの使用でMP4の使用が簡単になった。 
  • 動画は数MBの大容量が多いので直接HPに挿入するとサーバー容量に負担がかかる。
    その場合は下記YouTubeを利用するとサーバーに負担がかからず、ホームページへの埋め込みもできるし、スマホを含め殆どの端末で閲覧できる。
  • 使用するCodecも数多くあるがH.264が一般的のようだ。
    http://e-words.jp/w/H.264.html
  • こちらも参照 ⇒ スライドショー比較

  ネット上のムービーの閲覧 
ムービーのファイル形式は圧縮法(Codec)などで多数あり、WindowsではWindows Media Player でネット上の各ファイルを閲覧できる。
Versionによってサポートするファイル形式、Codecは異なる。 下記サイトから確認できる。
https://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8204-7942
上記Codecの他、Windows MediaPlyer ではWindowsの標準ファイル形式:AVI も閲覧可能。

  ホームページ作成ソフトでの挿入法 

DreamWeaver では  「 挿入」 →「 メディア」
Homepage Builder では 
Flash: 「挿入」 →「ファイル」 →「フラッシュ」

JavaScript, HTML5 は編集画面からの挿入も可能だが、直接ソースコード編集で関連する記述を挿入する方が簡単。

  Htmlソース への挿入 

JavaScript の場合
コード文の中に、
<script language="JavaScript">
.......
ここに JavaScript を挿入
</script>

Flash 、ASX、FLV の場合
<object ・・・・・>
.......
ここにに .swf(Flash) 、.ASX、.FLV の記述とパス を挿入
</object>

HTML5の<video><audio>コードの場合
→ HTML5はこちら参照

 ダウンロード、または クリックでストリーミング再生 

HPから MP4, WMV, 映像ファイルへリンク設定すると、再生ソフトが内蔵されている端末では、「ファイルを開く」の表示のクリックを経てストリーミング再生される。
  MP4 →  http://1939abe.web.fc2.com/pc/hp/html5/valentSound.mp4
  WMV →  http://1939abe.web.fc2.com/pc/hp/slideshow/wmv-flower.wmv

 YouTubeに映像ファイルを置いて ホームページ内で再生 

サーバー容量を節約したい場合はMP4, WMVファイルなどを
 YouTube に投稿してHPからリンクする。
 → YouTube 投稿方法と、例

  ホームページサーバーに置いて再生  

WMV、MP4 の場合は ソースコードに
<EMBED src="****.wmv"width="640" height="485">
  のようにファイル名と表示サイズを入れる。(閲覧ではMediaplayerアドオンを「有効」にしておく必要がある)
 MP4はVISTA/IE9 で見えない。WMVはスマホで再生できない(ネット情報)。

1) WMVの例:
 Homepage Builderでは:

  挿入 → ファイル → ビデオファイル
 DreamWeaverでは:
  挿入 → メディア → プラグイン
  (さらにコードで表示サイズ調整)



2)MP4の例:
HTML5の<video>コードを使用。 HTML4の<embed>では動作せず。




  4K/2K画質とビットレート

4K用映像を2K画面で見ると画質がいい。 これはビットレートの問題でしょう。
低ビットレートでは1ピクセルでの色情報が前画面と混ざり易くなってボケる。
1画面表示で4Kは2Kの4倍の情報量が必要ですから、もし、4倍のビットレートになってるとしたら、
その4倍ビット レートを維持して2K画面で見たら画質はよくなるはず。

下記サイトで4Kと2Kの比較があります。
https://www.youtube.com/watch?v=dUVCOufx6d0

下記サイトの下のほうにビットレートによる画質の差の例があります。
http://aviutl.info/bittore-to/

 備 考
  • 映像ファイルは一般に圧縮されているが巨大なファイルになる場合がある。
    ネット閲覧の場合はストリーミング機能でダウンロードと併行して再生されるからあまり重さを感じないが、
    メール添付や、余裕のないホームページサーバーへの負担は要注意です。
  • HPに掲載される形式はMp4、FLV、ASX形式が多い。 
  • WMV、MP4は、HPに画面を表示させて、Windows内蔵ソフトでストリーミング再生する。
  • ASXはそれ自身が動画ファイルではなく、WMVなど元のファイルと共存させてストリーミング再生する。
  • 一方、Flash(.swf)、FLV形式は、FashPlayer でストリーミング再生する。 
    YouTube はFLV形式が標準となっている。
  • WMVファイルを Flash に変換するとファイル容量は増大する。 1例として標準設定で 2.6倍となった。
  • Craving Explorer を使って、YouTube からダウンロードしたら、FLV形式の容量は、WAV,MP4 の1/4になった。
  • ホームページサーバーへの負担をかけない方法としてYouTube に投稿して、ホームページからここにリンクする方法が便利です。
  ファイル変換ソフト

※1)ASX形式に変換
http://jp.downpanda.com/the-date-conversion-38738.html
ASXはそれ自身が動画ファイルではなく、メタファイルといってWMVなど元のファイルと共存させて使用する。
解説:  http://msdn.microsoft.com/ja-jp/library/dd148561.aspx

Flash形式に変換
Adobe のFash制作ソフト、Fash制作互換ソフトで変換できる。
Adobe Fash: 使い方 (ただし、DirecteeShow9 / QuickTime7 のインストールが必要)
WebEffect: ファイル → インポート
Free Motion: ファイル → 読み込み  でいずれも簡単にできる。

Free Video Converter mp4/flv動画ホームページ埋め込み

Flash形式から変換はうまくいかない場合が多い。 
変換ソフト: Swivel  紹介
Swivel
の場合、 Flashのイベント処理位置(クリックでスタートや、最後のリンク設定など)を 避けた変換範囲
を指定した
ところ、10MBファイルでもうまく変換できた。 イベント処理位置を気にせず変換したところフリーズした。 

Anvsoft Flash to Video Converter(窓の森)
http://www.forest.impress.co.jp/article/2007/05/17/flashtovideo.html

http://www.gigafree.net/media/flashenc/
http://www.apowersoft.jp/convert-flash-swf-to-mp4.html#
  Online変換「Apowersoft」もあり。

  ストリーミング再生解説

ストリーミング配信手順
・エンコーダ ※3)で動画をストリーミングファイルへ変換 ⇒
・メタファイルを作成 ※1) ⇒ ホームページを作成

※3)Windows Media エンコーダ
この手順の解説
http://no1streaming.web.fc2.com/

ストリーミング用ファイルの作成(WMV編)

  動画をダウンロード

Craving Explorer

YouTube 作品のダウンロード:
Craving Explorerは、YouTube、ニコニコ動画などをダウンロードし、AVI / MPEG / MP4(iPod) / FLV / WAV / MP3 の形式に変換、保存できる。
使い方:このソフトを起動して、ここで検索するとYouTube のファイルにアクセスする。 Tool Bar の↓印をクリックすればダウンロードできる。
複雑な設定が必要なく、簡単に利用できる。 ただし最近のYouTube動画はプロテクトされてダウンロードが困難な作品が多い。 その場合は
下記の画面からのキャプチャソフトを使う。

ファイル変換: Craving Explorerで、AVI / MPEG / WAV を相互変換できる。ファイルサイズ、画質、再生状況は、SWF/WAV/MPEG あまり差なし。
AVI は非圧縮でファイルサイズ巨大。
使い方:元ファイルをCraving Explorerの下窓にDragすればいい。

4K Video Downloader
上のCraving Explorerの進展型か。4K映像に対応
  ビデオ解説
  PC画面上の動画取り込み

画面からのキャプチャ

Flash ファイルの収集と改造

  Windows MovieMaker による編集
WMV, AVI, MP4などのファイル形式は Windows付属 MovieMaker で編集できる。

  トラブル対策

Windows Liveムービーメーカを開こうとすると「ムービーメーカーの実行に必要な特殊効果ファイルが破損しています。・・・・」
のメッセージがでて起動しない → 修復してもだめなとき 対策 

同時にWindowsLive も起動しない時 → 対策 Fix it

  携帯動画

MPEG-4 が多いようだ。
http://trendy.nikkeibp.co.jp/article/column/20080124/1006385/

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1316953858

http://www.forest.impress.co.jp/lib/home/ktai/ktaipic/keitaidouga.html

  HTML5、iPad/iPhone、MP4

FlashはiPad/iPhoneでは見えませんが MP4形式の動画はiPad/iPhoneでも見えます
HTML5はこの MP4形式に対応しています。

下記はHTML5で記述されたMP4動画です。 iPad/iPhoneでも見えます。
http://www.videojs.com/

この動画の記述(ソース)
http://www.htmq.com/html5/004.shtml
によれば、HTML5の動画記述はHTML4とかなり違うようです。

この記述を手入力すれば今でもHTML5対応になりますが
新しいHomepageBuilderは通常の編集で対応できるらしい。(DreamWeaverも)
ただし、InternetExplorer閲覧にはVer9以降が必要。

国際規格のHTML5としては、一企業の形式(Flash=Adobe社)は使わず
国際規格のISO/IEC に準拠したMP4を優先したらしい。
http://e-words.jp/w/MP4.html


関連ページ

・ムービーのHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/movie.htm#it

・YouTube を利用したHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/you-tube.htm#it

・WebサイトからのFLASH 収集と改造
http://1939abe.web.fc2.com/pc/hp/flash/pacri.htm

・Flash ファイルのスマホ 対策
http://1939abe.web.fc2.com/pc/hp/flash/smapho.htm


     |  スライドショー比較  |  ホームページ作成体験へ  |

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

 

 

 

 

 

 

 

 

 

 

 

 

inserted by FC2 system