ムービーのHP掲載   09/10/4 16/9改定 安倍

このページはFLASHに関する記述が多いが、スマホで見えないので急速に消えつつあるようだ。

  動画形式の種類と違い(ネット解説)
  • ネットで見かけるムービーのファイル形式は、WMV、MP4、AVI,、FLASH、など多数ある。 
  • AVIはMS社がAppleのMOVに対抗して急遽作った形式で、可逆圧縮で劣化が小さいがStreamingができないので編集作業で多く使わ
    れ一般には殆ど見かけない。
  • 低圧縮のWMVは高画質で企業関係に広く使われる。
  • ネット上ではMP4が画質/容量のバランスから多く使われるが、ホームページに掲載する場合、VISTA/IE9 で見えないから要注意です。
  • 動画は数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、 Java Applet は編集画面からの挿入も可能だが、直接ソースコード編集で関連する記述を挿入する方が簡単。

  Htmlソース への挿入 

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

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

JAVA Applet の場合
<Appret ・・・・・>  
.......
ここにJava Applet に関する記述 を挿入

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

HPから WMV, MPEG映像ファイルへリンク設定すると、その形式の再生ソフトが内蔵されている端末では、リンク文字(映像)をクリックすれば映像がストリーミング再生される。
       クリックで再生するwmv映像の例

内蔵されていない場合は「保存」の表示がでて、これをクリックすれば自分の端末にダウンロードされる。

一般のWindows端末の場合、WMVはリンク文字(映像)をクリックすると映像が再生される。
MPEGの場合は、Upload前に自分のPCでリンク文字(映像)をクリックしても応答なしだが
Uploadしたサーバーにアクセスすれば、クリックすると「保存」の表示がでて これをクリックすれば自分のPCにダウンロードされる。

 YouTube利用 ホームページ内でストリーミング再生 

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

  自分のサーバーに置いて ホームページ内でストリーミング再生  (MP4は不可)

WMVはスマホで再生できず。

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

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



2) Flashや ASX、ファイルの場合 は ソースコードに
<OBJECT>・・・・・</OBJECT>
を埋め込む。 
ASXは下記 ※1)参照。

 Homepage Builderでは:
挿入 → ファイル → Flashファイル
 DreamWeaverでは:
挿入 → メディア → Flash

3) FLVの場合: Flashを仲介するファイルが別に必要。 ※2)
YouTube などの動画サイトで使われているが、一般サーバーに使うには面倒で必要性に乏しい。
YouTubeからダウンロードすると、このファイル形式になるが、これを再生するにはそれ用のソフトが必要。

  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に掲載される形式はMpeg、FLV、ASX形式が多い。 
  • WMV、MPEGは、HPに画面を表示させて、Windows内蔵ソフトでストリーミング再生する。
  • ASXはそれ自身が動画ファイルではなく、WMVなど元のファイルと共存させてストリーミング再生する。
  • 一方、Flash(.swf)、FLV形式は、FashPlayer でストリーミング再生する。 
    YouTube はFLV形式が標準となっている。
  • WMVファイルを Flash に変換するとファイル容量は増大する。 1例として標準設定で 2.6倍となった。
  • Craving Explorer を使って、YouTube からダウンロードしたら、FLV形式の容量は、WAV,MPEG の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

※2)FLV形式に変換
http://www.forest.impress.co.jp/article/2008/02/15/pazeravideo2flash.html 
http://www.forest.impress.co.jp/article/2007/09/14/video2flashconv.html

FLV動画の埋め込むには、Flashを仲介する.swf ファイルが別に必要です。下記サイト参照。
  http://www.seo-maniax.com/high-rank/flv-buries.php

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 の↓印をクリックすればダウンロードできる。
複雑な設定が必要なく、簡単に利用できる。

ファイル変換: 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

・CumStudio による動画取得
http://1st.geocities.jp/kyokuyu/pc/hp/slideshow/camstudio.htm

・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