ブログと動画：ブログへの動画投稿メモ

Yahoo!ブログに動画を投稿する方法について、確認した内容をメモしておきます。基本であるホームページ上での動画の扱いについて整理してからブログでの投稿手順について整理します。ホームページはGeocities（ここ）を利用して、ｗｗｗブラウザはMicrosoft Internet Explorer(7)を使用して確認します。ＯＳやブラウザが異なると違った結果になる事があると思います。一応自分なりに動作確認をしましたが、規格書など正式な技術資料を調べた訳ではないので、誤りがあると思います。またYouTubeやZoomeの仕様が変る事もありますので、現時点で確認できた内容です。
(2009/8)

基本であるホームページ(HTML)上での動画の扱いについて整理します。（１）自作動画(.wmv など)をホームページに貼り付け、（２）YouTube投稿動画をホームページに貼り付け、（３）zoome投稿動画をホームページに貼り付け、についてメモします。ホームページはHTMLで記述されますので、HTMLファイルの編集を行います。

１．１．ホームページ動画

例えば以下のようにして動画ファイルをホームページのサーバ上に置いて、それを表示させる。
　(1) WindowsMovieMakerなどで自作動画(myvideo.wmv)を作成する
　(2) ftpソフトなどでホームページサーバに転送する（動画ファイルのＵＲＬが確定）
　(3) HTML文中に動画を記述する（リンク形式、貼付け形式）

ａ．リンク形式

ホームページ上の文字列やイメージにリンクを設定し、そこをクリックしたら動画が表示されるようにする。HTML文中に以下のようにリンクタグを記述する。

<a href="http://www.geocities.jp/myid/myvideo.wmv">myvideo.wmv</a>

【実例】　myvideo.wmv

ｂ．貼付け形式

ホームページ上に動画が貼付けられた表示にする。HTML文中に以下のように記述する。IE7だとページを表示した時点で自動的に動画再生が始まります。

<EMBED src="myvideo.wmv" type="video/x-ms-wmv" width="640" height="480">

【実例】 動画表示サイズは変更(320,240)

１．２．YouTube動画

YouTubeに投稿した動画をホームページに掲載。
（１） YouTubeに動画を投稿する
（２） 投稿した動画を再生するページの右のほうに、URL欄と埋め込み欄がある。欄内のテキストをコピーする。

(a) URL欄には、以下の様な文字列が入っている。

http://www.youtube.com/watch?v=ClRjFSA4NfQ

(b) 埋め込み欄には、以下の様な文字列が入っている。（実際には改行の無い長い一行だが、適当に改行を入れた）

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ClRjFSA4NfQ&hl=ja&fs=1&">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ClRjFSA4NfQ&hl=ja&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed></object>

（３） HTML文中にコピーしたテキストを貼り付ける

ａ．リンク形式

　(a)をコピーしてHTML文中にペーストし、前後にリンク用のタグを追記する

<a href="http://www.youtube.com/watch?v=ClRjFSA4NfQ">myvideo-YouTube</a>

【実例】　myvideo-YouTube

ｂ．ページ埋め込み形式

　(b)をコピーしてHTML文中にペースト（実際には改行の無い長い一行だが、適当に改行を入れた）

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ClRjFSA4NfQ&hl=ja&fs=1&">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ClRjFSA4NfQ&hl=ja&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed></object>

【実例】

１．３．ｚｏｏｍｅ動画

（１）動画をzoomeに投稿する。
（２）zoomeの動画のページから貼り付けＨＴＭＬをコピーする。

コピーした内容は、以下のようなものになる。チェックを入れるか入れないかで内容は異なる。サイズ（大、中、小）の指定による違いはパラメータ(width,height)の値が変るだけなので表示したいサイズを選択してコピーする。

(a)「旧貼り付け」のチェックを外し、小を選択したときの貼り付けHTML（実際には改行の無い長い一行だが、適当に改行を入れた）

<object id="zp" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="360" height="288"><param name="movie"
value="http://zoome.jp/kenzo1999/zpdia/p/1/18" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash"
src="http://zoome.jp/kenzo1999/zpdia/p/1/18"
width="360" height="288" allowFullScreen="true"
allowScriptAccess="always" /></object>

(b)「旧貼り付け」のチェックを入れて、小を選択した時の貼り付けHTML（実際には改行の無い長い一行だが、適当に改行を入れた）

<script type="text/javascript"
src="http://www.zoome.jp/swfwrite
?param=de3d1686fffdf7f1d95510227ae5ae3c72836cd15f5624836d23656ca
0488279375d7a5518ebc2db0e2a6164dfbc764788b8d47b3d27
&width=360&height=288"></script>

(c)「旧貼り付け」のチェックを外し、小を選択した時のブログパーツ（実際には改行の無い長い一行だが、適当に改行を入れた）

<object id="zp" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="180" height="150">
<param name="movie" value="http://zoome.jp/kenzo1999/zpdia/b/1/18" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash" src="http://zoome.jp/kenzo1999/zpdia/b/1/18"
width="180" height="150" allowFullScreen="true" allowScriptAccess="always" /></object>

(d)「旧貼り付け」のチェックを入れて、小を選択した時のブログパーツ（実際には改行の無い長い一行だが、適当に改行を入れた）

<script type="text/javascript"
src="http://www.zoome.jp/swfblog
?param=de3d1686fffdf7f1d95510227ae5ae3c72836cd15f5624836d23656ca
0488279375d7a5518ebc2db0e2a6164dfbc764788b8d47b3d27"></script>

（３）HTML文中にコピーしたテキストを貼り付ける

ａ．リンク形式

　（　不明　）

ｂ．ページ埋め込み形式

ホームページ上に動画が貼付けられた表示にする。 （２）(a)（または(b)）をコピーしてHTML文中にペースト（実際には改行の無い長い一行だが、適当に改行を入れた）

<object id="zp" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="360" height="288"><param name="movie"
value="http://zoome.jp/kenzo1999/zpdia/p/1/18" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash"
src="http://zoome.jp/kenzo1999/zpdia/p/1/18" width="360" height="288"
allowFullScreen="true" allowScriptAccess="always" /></object>

【実例】

Yahoo!ブログに動画付きで投稿する手順です。動画の種類と登録方法および貼り付けるテキストのコピー方法については１．を参照してください。（１）ホームページに置いた動画、（２）YouTube投稿動画、（３）zoome投稿動画、で確認した手順を示します。ブログに動画を貼り付けるためにはWiki文法を使用します。新規登録画面で、「Wiki文法を使用する」にチェックを入れて記述します。

２．１．ホームページ動画

ａ．リンク形式

ホームページのサーバ上に置いた動画ファイルをYahoo!ブログに投稿する場合は、リンク形式なら、動画ファイルのＵＲＬをそのまま記載します。

http://www.geocities.jp/myid/myvideo.wmv

ｂ．貼付け形式

貼付け形式の場合、投稿文中（Wiki文法を使用）に、[[item( )]] に動画ファイルのURL表記および表示サイズのパラメータを加えて記述します。

[[item(http://www.geocities.jp/myid/myvideo.wmv,512,400)]]

embedでもほぼ同じやり方。パラメータに"0,"を加える。

[[embed(http://www.geocities.jp/myid/myvideo.wmv,0,512,400)]]

【実例】　（Yahoo!ブログを参照）

２．２．YouTube動画

ａ．リンク形式

２．１の同様な原理で表示する。動画ページへのＵＲＬが１．２．（２）(a)で得られるので、それを新規投稿画面にペーストするだけでよい。

http://www.youtube.com/watch?v=ClRjFSA4NfQ

ｂ．貼付け形式

動画ページへのＵＲＬは得られるが、これは動画ファイルへのＵＲＬではない。しかし次のように修正すれば、２．１．ｂと同様に [[embed( )]] を使って貼付けられる。

http://www.youtube.com/watch?v=ClRjFSA4NfQ

これの watch?v= を v/ にして、頭に [[(embed( 終わりに 0,425,350)]] を付加して２．１．ｂのように修正する。Wiki文法使用にチェックを入れること。itemも使える。

[[embed(http://www.youtube.com/v/ClRjFSA4NfQ,0,425,350)]]

【実例】　（Yahoo!ブログを参照）

２．３．zoome動画

ａ．リンク形式

　（未確認）

ｂ．貼付け形式

（１）（２）は１．３．の（１）（２）と同じ。（３）Yahoo!ブログの新規投稿画面で、「Wiki文法を使用する」にチェックを入れ、本文に１．３．（２）(d)でコピーした内容をペースト。param=の直後から、width=の直
前までの文字列を★部分に入れて、次の[[embed( ... )]]文を記入する。480,320は表示サイズ指定のパラメータなので、必要に応じて数値を調整する。
0,は自動再生しない(false)という意味のパラメータらしい。zoomeは自動で入る公告が邪魔。

[[embed(http://www.zoome.jp/swf/zpmmdiap.swf?baseDom=999&baseXML=★,0,480,320)]]

＜設定例＞
「旧貼り付け」、「中」を選択した時のコピー内容（実際は長い１行だが適当に改行して表示）

<script type="text/javascript"
src="http://www.zoome.jp/swfwrite
?param=de3d1686fffdf7f1d95510227ae5ae3c72836cd15f5624836d23656ca
0488279375d7a5518ebc2db0e2a6164dfbc764788b8d47b3d27
&width=400&height=320"></script>

　↓　[[embed形式にする

[[embed(http://www.zoome.jp/swf/zpmmdiap.swf?baseDom=999
&baseXML=de3d1686fffdf7f1d95510227ae5ae3c72836cd15f5624836d23656ca
0488279375d7a5518ebc2db0e2a6164dfbc764788b8d47b3d27,0,400,320)]]

音楽データ( .wma , .wav , など )の場合は、動画データとほぼ同じ方法になります。埋め込み形式にした場合、表示サイズ指定のパラメータは以下のように小さくする。

（１）[[item( )]] を使う

[[item(http://mydomain/myhome/mysound.mp3,400,200)]]

（２）[[embed( )]]を使う。

[[embed(http://mydomain/myhome/mysound.mp3,0,400,200)]]

Update : 2009 Aug.
Update : 2009 Dec.