since 2007.8 by K-ichi

Mon
__ Mon
2008/11/24

bloggerでも使われているXHTMLでは、基本的に装飾の類はcssを使うように、とされている。
IE6は、XHTMLと宣言されていても、記述の些細な違いで「後方互換モード」で表示してしまうため、この記事もその環境で動作確認したものになる。レイアウトが崩壊してしまうものもあり、勧められる記述ではない。
ちなみにIE8などでは互換表示機能があり、それによって「かつての正しくない環境」をある程度再現し見ることもできる。

2010/12/7　追記


bloggerに画像を貼り付けるように、動画も貼り付けたい。
blogger自身にもアップロードする機能があるが、比較的新しい機能のようで、まだ削除など管理はできない状態。ヘルプにはGoogleVideoでホストされているような記述（English(US)表示時）もあるが、画像とPicasaのような関係は、映像とGoogleVideoにはないようだ。

ともかく、いくつかの方法を試してみる。


bloggerから直にアップロードする

bloggerの編集ページからアップロードすると、サーバ側でflvに変換され、このような再生環境になる。ただし以下のようなテキスト回り込みは、裏技を使わないとできない。

この映像はクリボウの写真日記から勝手に拝借した。
ページのソースから、objectタグ、embedタグを丸々コピペすれば流用できてしまう。ただし、1900バイト近い非常に長大なものになる。IEなら、objectタグ、もしくはembedタグの片方だけでも問題ない。各タグには、テキスト回り込みのためのalign="left"を追加してある。

タグをすっきりさせたい場合は、コピペのあと、いったん「作成」タブを経由させる。すると、blogger上からアップロードした時点の、objectタグだけの簡素なものに変換される。変換といっても大層なことはしておらず、objectタグにclass、id、height、width、contentidの各属性を入れただけ。contentidは、idの後半16バイトの16進数そのもので、他は公開後と同一。

この簡素版タグ場合、align="left"を追加しても、回り込みは有効にならない。これは、公開時には長大なタグに自動変換され、その際に属性設定が削除されてしまうため。
つまり、blogger上からアップロードしてテキストの回り込みをさせるには、いったん公開して長大なタグを得て、それに属性設定を追加したものを使う必要がある。ちなみに、長大なタグに含まれるURLパラメータの一部（secureurlなど）は公開ごとに変化するが、そのまま使って問題はないようだ。

標準では、width=320、height=266となるが、コントロールボタン部は27ドットある。したがって、映像部の大きさは320×239になっている。ここでは4:3にすべく、height=267としてみた。

この方法でアップロードしたファイルは、一覧を確認したり削除したり、といった操作は、いまのところできない。bloggerにはその機能はなく、ホストしているというGoogleVideo上にも現れないため、アクセスのしようがない。ブログ記事を削除すると、画像なら同時に削除するかどうかの問い合わせが表示されるがそれもない。

<object align="left" width="320" height="267" class="BLOG_video_class" id="BLOG_video-9a8bc8620f81651c" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="movie" value="http://www.blogger.com/img/videoplayer.swf?videoUrl=（ものすごく長いので略）">
<param name="bgcolor" value="#FFFFFF"> <embed align="left" width="320" height="267" src="http://www.blogger.com/img/videoplayer.swf?videoUrl=（ものすごく長いので略）" type="application/x-shockwave-flash">
</embed>
</object>

（alignが効かない、アップロード時の簡素版タグ）
<object class="BLOG_video_class" id="BLOG_video-9a8bc8620f81651c" height="266" width="320" contentid="9a8bc8620f81651c"></object>


GoogleVideoでいく

Google系列で映像を扱えるサービスに、その名もズバリのGoogle Videoがある。投稿、削除、一覧など、基本的な機能は揃っている。すべて英語なのはつらい。Googleアカウントで利用ができる。

この動画も他人の褌。

水中から、アフターバーナーを焚いてロケットのように発射するF15。
エンジン２機で20万馬力ほどあり、これは翼の揚力が無くても飛んでいけるパワーなのだとか。
アップロードする際には、アクセス設定を「非公開-ビデオは検索結果に含まれません。」にしておけば、Google Videoでの検索にかからない設定にできる。アップロード後なら、右端のActions欄のEdit Video Infoから非公開にできる。

Google Videoの再生ページ内の「詳細」タブに「ビデオ埋め込み」があり、そこをクリックするとembedタグが表示される。ここでは、このタグにもalign="left"を追加している。
標準では400×326となる。bloggerと同じくコントロール部は27ドットあるため、映像部は400×299。4:3とするならば１ドット少ない。また他とのつり合いを考えて320×267と書き換えることにした。

blogger（公開後）やYoutubeでの映像埋め込みは、objectタグにembedタグがネストされている。これは、今後はobjectに統一される方向であり互換のためにembedも記述、という形なのだが、Google Videoではembedのみ。おそらく将来もブラウザの対応は大丈夫なのだろうが、少し気にはなる。

<embed align="left" id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=3694726567769452138&hl=ja&fs=true" style="width:320px;height:267px" allowFullScreen="true" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>


Picasaを使う

通常は特に意識することなくIEのプラグインだけで処理が行えるので、この項以外では「Picasaウェブアルバム」を単に「Picasa」と表記している。

bloggerから画像をアップロードすると、Picasaウェブアルバム上に専用フォルダが作られて、そこでさまざまな管理ができる。ウェブアルバムへアップロードしておき、あとからリンクを張ることも当然できる。

Picasaウェブアルバムへのアップロード方法として、IEのプラグインによってブラウザからアップロードする方法と、Picasa（アプリケーション）を使ってする方法がある。後者では、映像ファイルもアップロードが可能。
操作方法は難しくないが、いきなりファイルスキャンが強制的に行われるのには面食らう。落ち着いて読み進めれば判ることだが、同様に感じた人も多いようで、それに関するヘルプも存在する。

アップロードしたファイルは、サーバ側でflvに変換され、GoogleVideoのプレイヤによって再生される。リンクや埋め込みタグも表示されるが、これは「サムネイル画像＋プレイヤが表示されるページへのリンク」になる。プレイヤそのものに対するリンクではないので、埋め込みには使えない。
GoogleVideoのプレイヤが使われるが、GoogleVideoからはアクセスできない。あくまでウェブアルバムからアクセスする。そのうちbloggerからアップロードした映像ファイルも、ここで一括管理されるようになるんだろうか。

余談だが、アップロードしたJPEGファイルも適当に圧縮されている。微妙な色合いの画像では問題になることもある。


Youtubeを使う

Googleが買収し系列になったYoutubeにアップロードし、そのリンクを埋め込むこともできる。
アカウントを取る必要があるが、Googleアカウントと連携できるようになったようだ。また、十分日本語化されているので、使用法などで困ることはない。アップロード時に、公開オプションを非公開にできる。アップロード後に変更も可。

「test」で検索してみたら、こんな懐かしいものが……
Youtubeサイトに表示されているタグをblogger編集窓へコピペした後、「作成」タブには行ってはいけない。objectタグが一掃され、embedタグだけになってしまう。

bloggerから直にアップロードした際の変換の関係か、GoogleVideoに見られるようにembedタグのみでいくスタンスなのか、そのへんは定かではない。

標準では425×344と、ここで取り上げた中で最も大きい。再生後の再生候補リスト表示などとの関係で大きくしているのだろう。コントロール部は24ドットあり、映像部は425×320。4:3で計算すると、他とは逆に１ドット強縦が長い。つり合いのこともあり、ここでは320×264とした。

<object align="left" width="320" height="264">
<param name="movie" value="http://www.youtube.com/v/2Ir9kr02uCs&hl=ja&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed align="left" src="http://www.youtube.com/v/2Ir9kr02uCs&hl=ja&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="320" height="264"></embed>
</object>


よそのサーバにアップロードする（RealMedia、MPEGなど）

blogger、Google Video、Picasa、Youtube、いずれもアップロードしたものがサーバ側でflvに変換されて保存、公開される。そして、各々が用意したプレイヤによって再生される。
画質やプレイヤが気に入らない場合は、映像ファイルを作成し、別のサーバにアップロードし、そこへembedタグなどで埋め込みリンクさせる方法をとる。

これは、今はなきNASDAにあったrmファイル。

現在運用中のH-IIAロケットのメインエンジン、LE-7Aの技術データ取得試験映像。H-IIAは１号機が2001年８月に打ち上げられていて、ちょうどその頃に公開されたらしい映像。

NASDAはJAXAに統合されたため、サイトは現在終了している。
Internet Archiveに保存されている2004年取得の最終更新版のほか、WARPでも2003年９月のものがアーカイブされている。前者はWebすべてを対象に、後者は国立国会図書館運営で選択的に保存を行っている。
このファイルは、Real Player用の形式なので、煩雑だがそれ用にタグを書く。また、objectタグにembedタグをネストしておいたので、さらに輪をかけている。

Real Playerは、再生画面にコントロールボタンが付いていないため、再生画面とコントロールボタンの２つのブロック要素を記述する。２つのブロック要素にテキストを回り込ませることはできないので、tableタグを使って１つのブロック要素にまとめる。そしてtableタグに、align="left"を記述する。
この記述は、Real Playerプラグインを使った埋め込み再生のサイトを参考にした。

Real Player以外の映像ファイルも、同様にアップロードして埋め込むことができる。objectタグに必要なclassid属性やembedタグのtype属性などは、ググれば一覧がいくつもかかる。

埋め込む際には、再生アプリケーションを強制すべきか、ファイル形式で表して各々の環境に任せるべきかで悩む。
たとえばMPEGファイルをembedタグで埋め込むとき、type="application/x-mplayer2"とすれば、再生アプリケーションが強制されてしまう。type="video/mpeg"のように書けば、環境に合ったプレイヤで再生されるはずだが、うまくない。WindowsMediaPlayerがMPEGに関連付けられていれば正常に見られるが、RealPlayerではボタンしか表示されず、QuickTimeの場合はなぜかWMPが埋め込まれる、などという、訳が解らない状況になる。

ちなみにRealPlayerのコントロール部は、以下のとおり36ドット、WindowsMediaPlayerでは45ドットある。

<table align="left" border=0> <tr>
<object id=id0123456789 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=320 height=240>
<param name="controls" value="ImageWindow">
<param name="console" value="con0123456789">
<param name="src" value="http://web.archive.org/web/20040417141447/http://www.nasda.go.jp/lib/movie_lib/movie_file/h2a/h2a_le-7a_tashiro.rm">
<embed nojava="true" src="http://web.archive.org/web/20040417141447/http://www.nasda.go.jp/lib/movie_lib/movie_file/h2a/h2a_le-7a_tashiro.rm" type="audio/x-pn-realaudio-plugin" console="con0123456789" controls="ImageWindow" width=320 height=240></embed>
</object>
</tr>
<tr>
<object id=id0123456789 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=320 height=36>
<param name="controls" value="ControlPanel">
<param name="console" value="con0123456789">
<embed nojava="true" type="audio/x-pn-realaudio-plugin" console="con0123456789" controls="ControlPanel" width=320 height=36>
</embed>
</object>
</tr>
</table>


よそのサーバにアップロードする（flv）

世の中のストリーミング動画は、flv形式が標準となった感がある。変換も通常はサーバが行ってくれるが、ファイルは手元で処理、管理したいという場合は、自前のflvファイルを埋め込む方法もある。

SkyDriveにアップロードしたものを埋め込んでみた。
映像ファイルはFLV Playerの埋め込み (デジタル移民の冒険)のページからの借り物。いったんローカルにダウンロードし、それを改名、アップロードした。
ブラウザには普通、フラッシュ（swf）用のプラグインが入っている。ブラウザは、swfファイルは再生できるが、flvファイルは再生できない。
flvを再生するには、flvをswfファイルに埋め込み一体化する方法、swfでできたプレイヤによってストリーミング再生をする方法、のいずれかになる。ここでは後者を試す。
FLV Playerの埋め込み (デジタル移民の冒険)のページが詳しい。

プレイヤはEmbedding Flashの、ページ中ほどにあるFLV Media Playerからダウンロードできる。zipファイルで、展開後にできたplayer.swfがそのファイルになる。

アップロードするための「よそのサーバ」は、プロバイダのWebスペースなど別途用意する。無料のオンラインストレージなどもある。

用意したサーバに、任意のflvファイル（こるぁ2.flv）と上記のplayer.swfをアップロードしておく。埋め込みタグは以下のようになる。objectとネストするべきだろうが、面倒になったのでembedだけ。
コントロール部は20ドットなので、320×260としてある。

<embed align="left" src="http://9oye2q.bay.livefilestore.com/y1pxaCEbiMS1xSaPvPY5gZk3ZPz8vVMUAgp6Zl4Ws3vwQuNgYAwzX0dz8FyX4thB1twhYN7QRkKjQc/player.swf?file=http://9oye2q.bay.livefilestore.com/y1pHRhTkQEgmxOyIEE18E3x2K4FlFxoIRLQ4j2sHR_N_Cw_kioHp8ceHfnrKR6P7OibzAJzit6LSdY/%E3%81%93%E3%82%8B%E3%81%812.flv" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>


その他参考など
ラベル: ,

0 件のコメント:

コメントを投稿

.

登録: コメントの投稿 (Atom)

関連記事


この記事へのリンク by 「関連記事、被リンク記事をリストアップする」記事
  • JavaScriptで検索中……

ブログ アーカイブ