bloggerと動画 Home 関連記事 過去記事

2010/7/23
Picasaウェブアルバムの内部コードが変更になったようで、表示できなくなった。素直にYoutubeを使うのが良さそうだが、どこかのサーバにアップしてJWPlayerを使う、管理できないがbloggerのアップロード機能を使う、という手もある。


bloggerには動画を投稿する機能もある。データはGoogleVideo下に置かれるという話だが、GoogleVideoからも同根のPicasaウェブアルバムからも、一切のアクセスができない。そこで他サーバに、ということ等を当時の知識を総動員して、一生懸命調べて書いたのだが、そろそろ自分なりのやり方も固まってきたので、まとめておく。

まず、動画ファイルは動画サイトに置く。無料オンラインストレージとしては、推していたSkyDriveは直リンクを止めてしまったため、現状ではGoogleSites一択の状態。しかしここは100MBしかない。動画のような大きなファイルで食いつぶすわけにはいかない。
動画サイトは、GoogleVideo、Youtube、といったGoogle系のほか、Dailymotionなどもある。ちなみにGoogleVideoのアップロード機能は廃止になった。ほかには、アップロードに専用アプリケーション（Picasa3）が必要になるが、Picasaウェブアルバム上に置いておくこともできる。いったんアップロードしてしまえば、ウェブアルバム上で画像と同様に扱える。blogger上ではblogger用のプレイヤにしたかったので、今では専らこれを使っている。

ファイルの形式は、一般的なフォーマットなら大概使える。アップロードすると、サーバ側でflvやmpeg4に再エンコードされてしまうので、あまりがんばって高画質にしても意味がない。WMV9でone-pass、100%qualityあたりの品質のものを、AviUtlを使って*.aviファイルとして作っている。アップロードしたら、サーバが再エンコードするためのちょっとの時間を待ってやる。

Picasaウェブアルバムにログインしてみると、アップロードした先にファイルが鎮座している。再エンコードが終わっていれば、クリックで再生もできる。再生部の右上に、「標準の動画を表示」若しくは「高画質な動画を表示」というアンカーがある。標準は使えないレベルなので、「高画質……」をクリック。「標準の……」が表示された状態にする。

この動画ファイルをブログに貼り付けるには、URLが必要。得る方法は２つある。
１つ目。
RealPlayerをインストールしてある場合、動画部分をマウスでポイントすると、右上に「このビデオをダウンロード」というメニューがにゅっと現れる（右の画像）。この機能を使ってダウンロードする。ちなみにこのメニューのちょうど裏側に「高画質……」などのアンカーが隠れる。ダウンロードしたファイルは、「￥マイ ドキュメント￥マイ ビデオ￥RealPlayer ダウンロード」フォルダあたりにあるので、その中から探し出す。今ダウンロードしたものなら、作成日時の一番新しいものがそれになる。高画質状態でダウンロードできていれば、*.metaと*.mp4が存在する。*.metaをメモ帳などで開くと、後半部分にURLが書かれており、http://video.google.com/googleplayer.swf?……で始まる部分がここで得たいURLになる。
２つ目。
同様にPicasaウェブアルバムで、高画質モードで再生する。バッファリングが終わったら、IEの、[ツール(T)]-[インターネットオプション(O)]-インターネット一時ファイル[設定(S)]ボタン-インターネット一時ファイルのフォルダ[ファイルの表示(V)]ボタン、でフォルダを開く。ここでキャッシュされたファイルを探す。「最終アクセス日時」でソートすれば見つけやすい。該当するのは、種類が「Shockwave Flush Object」と「MPEG-4 Video」になっている２ファイル。必要なのは「Shockwave……」の方。このファイルを右クリックし、プロパティを開き、一番上に表示されるファイル名に該当する部分をコピーすれば得られる。

得たURLは加工して使う。元はたとえば以下のような形（実際は改行なし）。

http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fvp.video.google
.com%2Fvideodownload%3Fversion%3D0%26secureurl%3DjQAAACVf3g6rOgKQsSOfGxhRSDUPK
FpHWLbVd_diJZC4iqS_OO-cWHsd2V2V9JUwHYbRWVc-PiOA81huknb4f7rbnMFSEVknsVcBbrOp8zR
7ZJcKNKqHlVHUtvvx7rSZb8-q21r-NK1ccV61kPWYN_66t8K3jdbOLQw9uDExgTcnYcPCJtUPf8BFe
dBqcYk-GwBVvw%26sigh%3Df5n9iBxpxQlksDMXqXW59yBCujQ%26begin%3D0%26len%3D2147483
647%26docid%3D0&hl=ja&messagesUrl=http%3A%2F%2Fvideo.google.com%2FFlashUiStrin
gs.xlb%3Fframe%3Dflashstrings%26hl%3Dja&autoplay=yes&speedcontrol=0

赤い部分は、GoogleVideo用のプレイヤを表している。ウェブアルバム上でもGoogleVideoのプレイヤで再生されるのはこのため。bloggerのプレイヤを使いたい場合は、

http://www.blogger.com/img/videoplayer.swf

に、置き換える。

青い部分は、メニューの日本語化その他の機能を表している。「%26sigh」以降が該当する。&で始まる部分は、googleplayer.swf（またはvideoplayer.swf）に対するパラメータで、たとえば&autoplay=yesとすれば、ページ表示後自動再生する。&nogvlm=1なら、プレイヤ右下のリンクボタンが無効になる。もちろん、全削除でも構わない。

完成したURLは、embedタグで埋め込む。XHTMLではobjectタグへ統一の方向とも聞くので、そちらへ書き換えても良い。

<embed src="（上記で得たURL）" style="width:320;height:267;float:left;margin:0 10px 10px 0;"></embed>

styleの中身は、widthで表示幅、heightで表示高（コントロール部27px含む）、floatで文章回り込み、marginで周辺の余白、などを必要に応じて設定する。「風力発電試運転開始＠浜松市北区」の動画を始め、多くはこの方法で貼っている。