イナヅマTVログ

2011.09.08
13:17
author: taikiken
0件のコメント

VMWare Fusion+Win 7+IE 9でFlashが再生されないときの対処法

VM+Win7+IE9でFlashがブランクになり表示されないことがありました。
再生されるサイトもあり原因が良くわかりません。

AdobeのFlash Playerバージョンチェックをすると最新のPlayerがインストールされていることは確認できるのですが、肝心のFlashは表示できません。
http://www.adobe.com/jp/software/flash/about/

ブランク部分を右クリックするとFlashのコンテキストメニューは出てくるので存在していることはまちがいないようです。

「3Dグラフィックスの高速」チェックをOFF
どうも原因はVMの設定でディスプレイ3Dを有効にしていたことだったようです。
「3Dグラフィックスの高速」チェックをOFFにしたところ再生できるようになりました。

ちなみに3Dを有効にしたXP professional+IE6は問題なくFlashは再生されます。
なにか違いがあるのでしょう。

3Dを有効にしたWin7+IE9でFlashが再生されていたサイトはIE7互換モード設定になっていました。
これも関係しているのでしょうか?
また他のブラウザ、Chrome, Firefoxは3D有効でもFlashは表示されていました。

ずいぶん悩みましたがこれで解決(?)なのでしょうかねぇ。
IE 9のFlashレンダリングはなにか特殊なのかも。

Microsoftのサイトにもトラブルシューティングがありました。
IE9で Flash Player 10.3 を使用中に画面表示が乱れたり、Flash コンテンツが表示されない場合があります
「ソフトウェアレンダリングに切り替える」ようにとあります。
ビデオカードとの相性問題があるようです。

VMWear Forumが解決のヒントになりました。
http://communities.vmware.com/message/1786109#1786109

【環境】
OS X 10.6.8
VMWare Fusion 3.1.3
Windows 7 Home Premium
Internet Explorer 9
Flash Player 10.3.183.7

2011.08.31
18:36
author: taikiken
0件のコメント

時間をギュッと凝縮すると映像がおもしろくなる

Vimeo.comで公開されているRick Merekiさんのビデオがおもしろく楽しい。
http://vimeo.com/rickmereki
膨大な量のビデオ素材が1分ほどにきりつめられています。
長い長い時間を短く編集すると新しい発見と感動を与えてくれます。

MOVE

LEARN

EAT

MOVEが一番好きです。
ものすごく取材は大変だったでしょうに、おしげもなく編集されています。
この潔さも気持ちの良いひとつの要因なんでしょう。

2011.08.26
00:17
author: taikiken
0件のコメント

HTML5とCSS3のお勉強サイト、beta.theexpressiveweb.com

AdobeのHTML5とCSS3解説サイトのbeta版でお勉強。
The Expressive Web – Beta
http://beta.theexpressiveweb.com/#!/welcome
URLを見てピンときた方はFlashな人かも。
Flashコンテンツのディープリンク対策に使われているSWFAddressライクな感じになってます。

HTML5, CSS3とJavaScriptを使ってコンテンツ制作すると同一ページ内遷移時のブックマークが可能かどうかってやっぱり大事。
ここでは自前のJavascriptで実装してるみたい。

JSライブラリは
Modernizr, jQueryなどのド定番ものが使われているようです。

デザインもかわいらしくしあがっています。

スマートフォンにもCSS3のMedia Queries(@media)を使い対応しています。
PCで見てる時はウインドウ幅を狭めるとCSSが切り替わるのが確認できます。

CSS3 Animations, CSS3 Gradients…etcなどの気になる項目それぞれに解説があります。
Our Solar Sys­tem in CSS3もCSS3 Animationsで例として紹介されていました。

2011.08.25
13:37
author: taikiken
0件のコメント

HTML5, CSS3, @soulwireさんのRecursion Toyスゴ!

@soulwireさんのEXPERIMENTSに追加されたRecursion Toyがスゴすぎです。
HTML5, CSS3 + JavaScript で作られています。
生成されたグラフィックはPNGとしてダウンロードできます。

しかもソースコードをgithubで公開してくれているのでダウンロード可能です。
左上にリンクがあります。

http://soulwire.co.uk/experiments/recursion-toy/

見て腰抜かしちゃって下さい。


2011.08.25
11:34
author: taikiken
0件のコメント

Solarsystem(太陽系)アニメーションをCSS3で

CSS3でSolarsystem(太陽系)アニメーションを作ちゃったお方がいらっしゃる。
超カッコいい。

http://neography.com/experiment/circles/solarsystem/

このカッコいいアニメーションの解説は作者のブログに書いてあります。
Our Solar Sys­tem in CSS3
IEで見ると悲しい結果になるようです。
Webkit系ブラウザでご覧下さい。

2011.07.29
01:44
author: taikiken
0件のコメント

HTML5 Video Player #fsync 2011-07-28

future sync vol.1 でのLT資料を公開します。
http://futuresync.jp/

開催日直前に参加が決まったので超突貫工事ですけど…

HTML5 Video Playerの選択肢について話しました。

videoタグを使えば動画再生は従来のFlash+flvよりも手軽に行えます。
しかもiOS, Android, Windows Phoneにも対応できると良いことずくめです。

h.264(.mp4)とWebM(.webm)の2ファイルを用意するとIE6~IE8以外は全て対応できます。
h.264だけの場合はFlash Playerを用意する必要があります。

IE6~IE8にも対応させるならFlash Playerは必須になります。

videoタグでobjectタグを挟むようにします。
詳細はスライドにも書いた Video for Everybody! をご覧下さい。

<video>
   <object>
       <param />
   </object>
</video>

時間が無くてゆっくり見てもらえなかったデモファイルも公開します。
*IE6~IE8には対応していません。
*急遽作成したのでvideoタグに対応したブラウザでしか動作しません。
.mp4だけを用意しています。
Leanback Playerは0.7.2を使用していますがFirefoxでバグがあるらしく動作しません。 Ver.0.8でFixするらしいのですが現在はまだベータテスト中のようです。
む〜、ローカルテストではWebMを用意すれば動いたんだけどなぁ。
現在調査中・・・

demo

HTML5 <video>タグだけでビデオ(動画)再生は可能?

h.264(.mp4)とWebM(.webm)の2種類のファイルを用意するのが無難です。
h.264だけの時とIE6~IE8をサポートする場合はFlash Fallbackが必要になります。

Flash Fallbackは各ライブラリが提供するPlayerのライセンスに注意して使用して下さい。

【注意】
.mp4は大丈夫だと思いますが、.webmと.ogvはサーバーが対応してないことが多いようです。
.htaccessに下記のようにAddTyeを記述して下さい。

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

【最後に】
future syncに参加していたどのコミュニティとも無縁でしたが話をする機会をいただき感謝しています。

2011.07.22
14:27
author: taikiken
9件のコメント

HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js

WebでビデオだったらFlash+.flv最強伝説が長く続いてましたがiOSの登場で状況が変わってしまいました。
iOSではFlashはサポートされません、ていうか超悪者扱いです。
iPhone, iPad対応のコンテンツでは、ジョブズさんはHTML5(<video>)+h.264一択なのでHTML5を使わざるえません。
PC向けはどうする?
どう分岐する?

そんな面倒くさいことを一手に引き受けてくれる便利なライブラリが色々登場しているみたいです。

Browserと動画フォーマット

videoタグでサポートされている動画フォーマットがBrowser毎に違うのが大きな問題です。

h.264
IE9, Safari, iOS, Android

WebM
IE9*, Firefox 4以降, Opera 10.60以降, Chrome

*IE9はVP8 CODECをインストール

IE9 IE6-8 Firefox Opera Safari Chrome iOS Android
h.264 ◯ – – – ◯ *◯ ◯ ◯
WebM ◯ – ◯ ◯ – ◯ – –

*Chromeはh.264には対応しないと言いながらサポートを続けています。

Video Playerライブラリ

HTML5 Video Playerライブラリは次のように考えられて作られているようです。

動画はh.264だけでもOK。
IE9, Safari, iOS, AndroidはHTML5で再生。
未対応ブラウザはFlashを使用し再生。

ブラウザ対応やプレイヤUIのためにJavaScriptとCSS, 画像ファイルが同梱されています。

動画はh.264だけ作ればすみます。
WebMも作ったらFlashで再生はIE6-8だけになります。

ライブラリ選択
VideoSWS* : HTML5 Video Player Comparison
http://praegnanz.de/html5video/
コチラが参考になりました。
数あるライブラリを検証し機能比較とデモおよびお勧めを掲載してくれています。

VideoJS
http://videojs.com/

スキンでデザインをカスタマイズ可能です。
始めから良く出来たスキンが添付されています。
主立ったCMSのPluginが用意されています。

APIドキュメントはあるにはあるのですが…
https://github.com/zencoder/video-js/blob/master/docs/API.markdown
demoファイルがあるのでそちらを見てくれな感じになっています。

MediaElement.js
http://mediaelementjs.com/

ドキュメントがしっかりしているので安心して使えそうです。

下記の表はMediaElement.jsのものです。

IE9
IE9
IE6-8
IE6-8
Firefox
Firefox
Opera
Opera
Safari
Safari
Chrome
Chrome
iPhone/iPad
iOS
Android
Android
Windows Phone 7
WP7
h.264 only HTML5 Adobe Flash Adobe Flash Adobe Flash HTML5 Adobe Flash3 HTML5 HTML5 Native
WebM only HTML51 Flash112 HTML5 HTML5 Flash112 HTML5 – – –
WebM + h.264 HTML5 Adobe Flash HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 Native
WMV HTML5 Silverlight Silverlight Silverlight Silverlight Silverlight – – Native
FLV Adobe Flash Adobe Flash Adobe Flash Adobe Flash Adobe Flash Adobe Flash – Adobe Flash –
MP3 HTML5 Adobe Flash Adobe Flash Adobe Flash HTML5 HTML5 HTML5 Native Native

表のようにブラウザ毎に対応させているらしい。

有料のPlayer
JW Player
Shadowboxにも添付されている老舗longtail videoのPlayerです。
Flash Videoのためのものだと思っていたのですが、いつのまにかHTML5 Videoにも対応してたんですねぇ。

SublimeVideo
美しいスキンのPlayerです。
VideoSWS*も同じ感想のようですが、ちょいとお高めです。
金にものを言わせることが出来るプロジェクトだったら使ってみたいと思いました。

【最後に】
Quicktime, Real Video, Windows Mediaとフォーマットが対立していた不毛な時代に戻りたくないのは制作側もユーザーも同じ思いでしょう。
ブラウザやOSでの差異はそれぞれの思惑もあるので統一されるのはなかなか難しい話なのかもです。
優れたライブラリが多数登場してくれているおかげでHTML5時代はなんとか乗りきれるかも知れません。

なにがあるのか分からないのがWebなので安心はしていませんが…

update 2011-07-26
ライセンスに注意!
VideoJSのソースを見たところ、Flash(swf)はサードパーティーの flowplayer を使うようになっていました。
flowplayer は有償です。
無料版もありますがロゴの表記をしないといけないなどの条件があるので企業サイトでは使用しにくいかもしれません。

HTML5 Video Player のネックはIE8までの対応いかんにかかっているようです。
IE9未満だとFlash(swf)を使用せざるえません。
自前で作ってしまえばいいんですけど。

Flash(swf)が添付されてるMediaElement.jsが無難なのかもです。

update 2013-10-22
続編書きました。
【続】HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js。微妙な感じ…

2011.07.15
00:22
author: taikiken
0件のコメント

Adobe AIR LaunchpadでAIRアプリ開発、モバイルもね

AIRも3.0betaが登場しAdobeはますますモバイルアプリ開発プラットフォームに力を入れていることが伺えます。

現時点で最新stableのAIR 2.7でも
AIR for iOS
AIR for Android
AIR for Blackberry
AIR for Desktop
とワンソース・マルチプラットフォーム開発が可能です。

こうなると面倒くさいのがそれぞれのプラットフォーム向けの設定です。
タッチ、ジェスチャー、カメラ、GPS…などなど Example-app.xml に複数の設定を書き込まないといけません。
プロジェクト作成時に自動的に書き込まれるものもありますが手動で追加しないものもかなりあります。

そういう面倒くさいことに対応してくれるAIRアプリがあります。

Adobe AIR Launchpad

Adobe AIR Launchpadは開発用Flexプロジェクトを作成してくれる便利アプリです。

全機能をONにしてプロジェクトを作成してみました。
どうも馴染めないmxmlベースですが作られたプロジェクトをインポートしてビルドするとすぐにテスト可能です。

作られたファイルをながめていると「目から鱗が落ちる」なこともありました。
便利なものは使わなくちゃです。

コチラの記事で知りました。
Adobe AIR Launchpad 3.0 Released supporting Android, iOS and Blackberry Devices!

Adobe Labsのプロジェクトです。
http://labs.adobe.com/technologies/airlaunchpad/

ダウンロードとインストールはflex.orgからも可能です。
http://flex.org/launchpad/

kamijoさんが紹介記事を書かれていました。
Adobe AIR LaunchPad ベータ 3 公開
2010年11月 1日 の記事でした。
以前からあったんですね。

2011.07.14
11:28
author: taikiken
0件のコメント

OSMF, MediaPlayerのBoolean型プロパティ

Open Source Media Framework(OSMF), org.osmf.media.MediaPlayer Boolean型プロパティメモ
再生のキモClassのMediaPlayerには多くのBoolean型プロパティが存在している。

Adobe Open Source Media Framework

Read only
●canBuffer
バッファリングが可能かどうか

●canLoad
ロード可能かどうか

●canPause
ポーズ(一時中断)可能かどうか

●canPlay
プレイ(再生)可能かどうか

●canSeek
シーク可能かどうか

●hasAudio
音声を持っているかどうか

●hasDRM
DRM(Digital Rights Management)(著作権保護)されているかどうか

●isDVRRecording
DVDにレコーディング(録画)可能かどうか

●isDynamicStream
Dynamic Streamingかどうか
http://www.adobe.com/jp/products/httpdynamicstreaming/faq/

HTTP Dynamic Streamingとは?
HTTP Dynamic Streamingは、Flash Adobe Flash Player 10.1およびAdobe AIR® 2ランタイムにおいて、高品質(H.264またはV6)のネットワーク効率に優れたHTTPストリーミング配信を可能にし、Adobe® Flash® Access®と緊密に連携してコンテンツを強力に保護します。このオープンフォーマットソリューションを採用すると、オンラインパブリッシャーは、既存のネットワークおよびキャッシュインフラストラクチャを活用し、メディアコンテンツをAdobe Flash Platformに効率良く配信できます。Flash Media Serverは、ストリーミングや多方向コミュニケーションに加え、迅速な起動やすばやいシークといった高度なインタラクティブ体験を実現するソリューションとして、今後も最良の選択肢であることに変わりはありません。Flash Media Server 3.5と同様、HTTP Dynamic Streamingはサービスの質(QoS)監視機能、アダプティブビットレートストリーミング、およびDVR機能をサポートします。HTTP Dynamic Streamingワークフローには、コンテンツ作成ツール、HTTPキャッシュに最適なフラグメント化されたMP4ファイル、再生フレームワーク(Open Source Media Framework(OSMF))が含まれ、Flash Accessと連携させればコンテンツを保護することも可能です。こうしたことから、Adobe Flash Platformは保護された高品質の再生体験を確実に配信するのに最適な選択肢であり続けます。

●buffering
バッファリング中かどうか

●temporal
temporal(一時的)かどうか

temporalの説明にAPI Referenceでは下記のように書かれている。

Temporal media supports a duration and a currentTime within that duration.

temporalだとduration(再生時間)とcurrentTime(現在時間)がサポートされるらしい。
う〜ん、temporalでない時ってどんなケースだ?

Rewritable
●autoDynamicStreamSwitch
Dynamic Streamに自動で切替える。
defaultはtrue。

●autoPlay
自動再生させる。
defaultはtrue。

●autoRewind
再生が終了すると自動的に先頭フレームに戻す。
defaultはfalse。
注意、下記loopプロパティの設定が優先される

●loop
繰返し再生する。
defaultはfalse。
autoRewindの設定より優先される。

【IllegalOperationErrorに注意】
canPlayがfalseの時にplayメソッドを実行するとIllegalOperationErrorが発生。
メソッド実行の前にチェックしないといけない様子。

【OSMFで繰返し再生】

import org.osmf.elements.VideoElement;
import org.osmf.media.MediaPlayer;
import org.osmf.media.MediaPlayerSprite;
import org.osmf.media.URLResource;
 
var mps:MediaPlayerSprite = new MediaPlayerSprite();
var mp:MediaPlayer = mps.mediaPlayer;
var ve:VideoElement = new VideoElement();
ve.resource = new URLResource("assets/example.f4v");
mp.media = ve;
mp.loop = true;
addChild(mps);

MediaPlayerSpriteではmediaPlayerプロパティがMediaPlayerインスタンス。
コードは簡略化しているので実際の使用ではロード、バッファリング他もろもろのチェックをする。