映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
t.saito
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

前回、Strobe Media Playbackのサンプルについている、setupを利用して、埋め込みコードを取得しましたが、objectタグを利用した方法でした。

YouTubeの埋め込みコードは、iframeをデフォルトにしているので、長いものに巻かれる感じで、今回は、iframeのケースを試してみようと思います。

やり方は、まず前回同様、Strobe Media Playbackをダウンロードして、「for Flash Player 10.1」を「StrobeMediaPlayback」にリネーム。そのままFTPでアップロードします。StrobeMediaPlaybackフォルダの1つ上に、動画を表示するHTMLファイルを置くようにします。

サンプルとして、埋め込みコードは、このような感じになります。

<iframe width="640" height="360" src="StrobeMediaPlayback/embed.html?src=https://bizvalley.co.jp/asset/01/bizvalley_pv.flv" class="strobemediaplayback-video-player" frameborder="0" allowfullscreen"></iframe>

ポイントは、embed.htmlにアクセスして、?src= で動画ファイルを指定している所です。動画形式は、flv、mp4どちらでもいけます。

src="StrobeMediaPlayback/embed.html?src=<動画ファイルURL>"

ブログに埋め込むと、このような感じになります。下の埋め込みは、相対パスでは繋がらないので、embed.htmlを絶対パスで指定しています。


Strobe Media Playbackでiframeを利用した埋め込み

サンプルデモ

いろいろなやり方があるので、必要なケースに応じて使い分けてみるといいでしょう。

こんにちは。
皆様、 初音ミク ご存知ですか?
GoogleやファミリーマートのCMに出たり、冨田勲のイーハトーヴに出たり、オペラに出たり・・・
様々なシーンで引っ張りだこのミクさんが、今ドミノ・ピザとコラボしてますね!

ドミノ・ピザのアプリから注文すると、ミクさんが配達状況を知らせてくれたりします♪
そして!!AR機能搭載のドミノ・ピザBOXの上でミクさんがライブ!!!

ミクファンとしては注文するしかない。ということで、早速ポチっと・・・

ピザが届くまでアプリ画面が↓になります。
画面上部の配達状況が更新されていきますが、仕上げ中に18分、配達中が消えてから6分後に到着・・・
と、どうやらリアルタイム更新ではないと思われますが、どのタイミングで更新されてるのかは不明。

miku1 miku3 miku2

☆ここでちょっとARについて。
AR(Augmented Reality)、日本語ではよく「拡張現実」と言われます。中二病を発症しそうな単語ですね。
要は現実に見えている・聞こえているものに「何か」をプラスして現実を拡張してくれる。
現実以上の「何か」を表現してくれる技術のことですが、・・・すみません。よくわかりませんよね。
うまく説明できない(実は私もよくわかっていない)ので、ご興味ある方はぜひ調べてみてくださいm(_ _)m

そして、このAR機能を使ってミクさんのライブを撮影→編集したいと思います♪

miku4 miku5-550x976

↑このピザの箱にアプリを起動した状態で携帯のカメラを向けると↑ミクさんが出現します。

では早速ライブ開始

まずはipadにアプリをダウンロード(iphone用のケーブル持ってないので)
→ipadからHDMI出力でキャプチャボードを通してPCへ(ミラーリングで表示するだけならHDMI直で大丈夫ですが、今回はキャプチャなのでキャプチャボードをかまします。)
→QTで撮影します(premiereやfinal cutなどの編集機ではうまく映像が表示されず、キャプチャできませんでしたT-T。QTだと非圧縮なので、1曲分で12Gぐらいになります)
→撮影した映像をAfterEffectsでトリミング&エンコード(Premiere だとうまく再生できない&エンコードの途中で落ちます。PCの性能のせいかもです。)
→エンコードしたデータをpremiereのマルチカメラ機能で編集します

編集画面はこんな感じ

編集画面

 

で、できたのがコレ



ipadを手持ちで撮影したのでブレブレです (´・ω・`) ショボーン
しかもせっかくのARなのに黒い布の上で撮ったので、「リアル×バーチャル」のリアルの部分が真っ黒です |ω・`) ショボーーン

次回はもうちょっと考えて撮ります (`・ω・´)キリッ

あ。もちろんピザはおいしくいただきました♪

皆さんはスマホお持ちですか?
OSは「iOS」ですか?「Android」ですか?

スマホOS市場のおよそ9割はこの2つで占められているらしいです。

ただ、最近「FirefoxOS」というのをニュースで良く見かけるようになりました。

「iOS」「Android」の2大巨頭に真っ向勝負を挑むそうです。

そして調べてみると、私も愛用しているFirefoxブラウザでシミュレータが
動作するとの情報を仕入れまして、早速試してみました。

メニューのツール→アドオンでアドオンマネージャを起動させ「os」で検索すると
「Firefox OS Simulator 2.0」が出てきましたのでインストール。

k-130315-1

ほどなくインストールが完了。自動的にダッシュボードが現れました。
以後はメニューのツール→Web開発→Firefox OS Simulatorで立ち上がります。

左にあるStoppedをクリックしてRunningに切り替えるといよいよシミュレータの起動です。

k-130315-3

何の細かい設定も無く、いとも簡単に起動しました。

k-130315-4

ホーム画面
k-130315-5

スワイプさせると色々プリセットのアプリが出てきました。

k-130315-6

さて、このシミュレータですが本来はアプリ開発者の為に提供されているものでして、
私のような開発者でも無い人間には無用の産物なのですが、ここまで来ると
試しにアプリでも作ってみようという気になってくる性分です。

調べてみるとFirefoxOSアプリはHTML5、Javascript、CSSで開発。要はWebアプリとの事。

前にHTML5を少し勉強したときに、何に使う訳でも無く作ったWebページが残っていたので、
それを流用してみることにしました。

前述の通り素人ですので、正直細かいことは分かりませんし説明も出来ませんが、
Manifestファイルというものを作れば、即FirefoxOSアプリとして使えるとのこと。

あれやこれやと調べてManifestファイル作成完了。

manifest.webapp------------
{
"version": "0.1",
"name": "BizValley",
"description": "BizValley",
"launch_path": "/index.html",
"icons": {
"128": "/images/icon.png"
},
"developer": {
"name": "BizValley",
"url": "https://bizvalley.co.jp"
},
"default_locale": "ja"
}
-------------------

さて、インストールしてみましょう。

ダッシュボードのAdd Directoryから、先ほど作成したManifestファイルを選択。

k-130315-7

すぐにシミュレータ上に "installed"の文字が出ました。

k-130315-8

アプリとしてちゃんと登録もされました。

k-130315-9

そして何の問題もなく起動。

k-130315-10

画質悪いですが、動いている様子


以上、シミュレータのインストールから簡単なアプリの実行まで行ってみました。

そしてまた一つ私の本業に何の役にも立たない知識が増えました。

Strobe Media Playback を利用して、動画にメディアプレイヤーを設置してみようと思います。Flash Media Playback を利用したやり方は、こちらをご参考ください。

Strobe Media PlaybackとFlash Media Playbackとの違い
両方とも、FLV、MP4動画をFlashで再生するメディアプレイヤーです。

  • Strobe Media Playback
    アドビがオープンソースとして公開したもので、オリジナルのプレイヤーをデザインしたり、自前のサーバーに、メディアプレイヤーを設置することができます。開発の母体は、Open Source Media Frameworkです。
  • Flash Media Playback
    ざっくり言えば、アドビが Strobe Media Playback をAdobe.comにホストして公開したものです。カスタマイズ性は低いですが、手軽に利用できる所が特徴です。
サーバーに、ホストするだけなら、Strobe Media Playback は、それほど難しくはありませんので、設定して試してみましょう。

Strobe Media Playbackをダウンロード
Strobe Media Playbackのサイトから、ファイルをダウンロードします。


StrobeMediaPlayback_1.6.328-full.zip をダウンロードします。解凍すると、ソースコードの srcフォルダとパブリッシュ済みの for Flash Player 10.1などがあります。

20130313-2
for Flash Player 10.1フォルダの中身を見ると、いろいろ入っていますが、とりあえず、フォルダ名を「StrobeMediaPlayback」にリネームしてFTPでサーバーにそのままアップロードします。


setup.htmlにアクセスすると、「Strobe.swf Setup page」画面が表示されます。ここで、動画ファイルの指定などパラメータの設定を行います。



既定では、サンプル動画のURLが指定されているので、画面下の「Preview and Update」ボタンをクリックするとPreview Player上に、オレンジシャツのお兄さんが出現します。



20130313-6

では、用意した動画で設定してみましょう。

動画の指定、ポスターフレームを設定する
<Embed parameters>
動画の縦横のサイズを指定します。
例)Width = 640、Height = 360

<Flash Vars>
動画ファイルの指定
例)src = https://bizvalley.co.jp/asset/01/bizvalley_pv.flv

ポスターフレームの指定
例)poster = https://bizvalley.co.jp/asset/01/poster.png

「Preview and Update」ボタンをクリックすると、設定が反映されます。

20130313-7
サンプル動画

そして、埋め込みコードを、HTMLに貼り付ければ完成です。Strobe Media Playbackを利用すると、メディアプレイヤーをサイト内に配置して配信をすることができます。

次回は、iframeを利用した方法を説明いたします。
https://bizvalley.co.jp/blog/2405.html

こんにちは、映像制作スタッフの高橋です。

しつこいと言われても、
今回も「Trapcode Mir」について書かせていただきます。

最近、祝賀会(祝賀パーティー)記録映像の動画編集を行いました。

その際、「Trapcode Mir」を用いて作成したサテン生地が揺らめくような動画を
インタビュー映像時の板付きテロップに使用しました。

「After Effects」のエフェクト「フラクタルノイズ」と「CC Cylinder」を適用すれば、
同様のようなものは作成できますが、「Trapcode Mir」のほうが、
「短時間かつ簡単」に「理想的な生地の質感」が表現できると思います。

他にもこのように、
リボン
初期設定から、少しの変更・調整だけで、
結ぶことはできませんが、リボンをはためかせる表現がすぐにできます。
参考設定
リボンのサテン生地の光沢度合いをもっと出したい場合は、
ライト・レイヤーを追加してみると良いと思います。

では、これにて失礼します。

-

【正社員募集のお知らせ】
当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。
詳しくは【人材募集】のページをご覧ください。※モバイルページでご覧の方はPC版のTOPにリンクがございます。