2011年10月4日火曜日

flowplayer はmp4が貼りつけられます!iPad でビデオを見せられる!

この頃、人知れず悩んでいたんです。
YouTubeの下の部分に広告が出る…これ商業サイトでYouTube使えないなぁと…高級商品の訴求にyoutubeとか貼りたくないじゃないですか…

2013年6月追記… 今はなき…堀江産婦人科さんは院長の病気のため廃業されました。w
で、最近はhttp://www.projekktor.com/ がいいと思ってます。詳しくはこちら



やっとiPadにもビデオを見せられる技術をゲットしました!
でも、アンドロイドのスマートフォン変換でこのページを見るとみえなかったりwww微妙ですが。ホームページだと見えます。

最近、twitterでカムタジアスタジオで作ったツイッター普及のためのビデオを公開しました~などと告知をすると、結構、iPadやらiphoneやらで見ている人が多く、見れないと言うてくる。ちぇ~っと思いながらmp4を直リンク貼ってあげたりしていた…

正直私は正真正銘のアンチ巨人&アンチアップルです。が、そうも言っていられないのは認めざるえない。 アンドロイドはコテンパンに評判悪いですね。正直…。

で、iphoneはYouTubeは見れてもflashは見れないという不思議な仕様です(儲けを独占したい嫌な会社ですね。アップル社は!)。
前からFlowPlayer がiphone対応になったというので気になっていたのですが、mp4の直リンクを貼ったやり方は次のようにすることがわかりました。

<a
href="../doctor2.mp4"
style="display:block;width:640px;height:480px;"
id="ipad">
</a>

もちろんhead部分に flowplayer-3.2.6.min.jsとflowplayer.ipad-3.2.2.js はいるのですが…

上記プログラムの直下に

<script>
$f("ipad", "../flowplayer-3.2.7.swf", {
buffering: true,
clip: {
autoPlay: false,
autoBuffering: true,
bufferLength: '3',
scaling: 'fit'
}
}).ipad();
</script>

というscriptを入れます。
buffer の有効というのでautoplay stop がキレイに最初の場面を表示させてできるのは便利ですね。
個人的に勝手にビデオ始まるの好きじゃないんです。

こちらにデモがあります
よければ…ソースで見てください。 ちなみにオートプレイを有効にしていても、iPadでは止まった黒い画面に進むのマークがつくだけです…。

本家の解説にはflowplayer.ipad-3.2.2.js はなくても動くとあるが、実際はIEでエラーが出る↓ようでつけておいた方が無難のようです。。




で、やってみたら…ツイッターで聞いてみたら…見れないと言われたorz
でも、こっちの本家のデモは確かに見えるそうで…

それにしてもちょっと呼びかけたらすぐ返事くるなんて多いんだなiPad iphone野郎!とそこでも思う。

よし!買いましょう!(孫正義社長風)

アンチとしてはヤフオクにて16G初期モデル25500円で購入。

でも、どうあがいても見えるはずなのに見えない…半日悩み抜く…。
で、本家のビデオなら見れる…これはどうもmp4の作り方が違うみたいだと気がつく(遅すぎ)
そして、作り方を試行錯誤してQtimeで変換してみると…iPadでは見えるが、IEで見えない! orz 泣く。
そしてSuper 使ってみたりいろんなことしてもダメで、そうだと思ったのはすでに翌日(とりあえず終了)
翌日もノイローゼ状態で考えて、ふっと思いつたのは(遅すぎ)作った時にMAGIXのMovie_Edit_Pro_15_Plusで作ったのですが、それでいきなりmp4でエクスポートをするのではなく、まずmov のクイックタイムにしてみた。
それからクイックタイムでmp4に変換する。
するとIEで見れない========= (号泣)
私にはこれがあるとDVDFab8のコンバーターを投入 (約3800円ではなく無期限の5748円を投入!金で解決できるなら安いもの!)のmp4変換でゼネリックでやってみた。



できたようである…。最初、キャッシュがクリアになってなくて動かない。動かないと思ってもうアキラメてswfobjectしかない。とか思っていたが(バカ)その作業に変わろうとしていたところで気がついた…。
感動した!

結論!movで作る dvdFabでゼネリックでmp4に変換したものでないとwindowsでもipadでも見れません!



ちなみに、大阪 吹田 堀江産婦人科様は日本語ドメインで運営しています。それでOperaで、相対パスで書いているのを見るとエラーになるので、変換したアドレスで絶対パスで書かないと表示されません。 日本語ドメインはそういうところを気をつけないといけないみたいですね。

この1ページのためにだいたい3万5,000円くらいの投資ですかね。って、まぁ。これから疾風怒濤が始まるなと…。
html5についてはまた書きます。

最初、これはhtml5じゃないから動かないだと思っていたが、別にどうしてもhtml5である必要はないようです。
が、今回勢いでhtml5も勉強してしまった。 またこれについても詳しく書きます。

疲れたよ…。





ipadなんか買いたくなかったんだよ。

アンドロイドのfirefoxでならいけるかも…できなかった…。

ありましたよシミュレーター!

シミュレーターだと全部見れるなぁ。これはサイズを見るだけのものでした。orz

こっちのシミュレーターはちょっとマシ

でもまぁ。微妙な違いがありますので、ネットで仕事する人には、iPadはこれから必要でしょうねぇ。

iPhoneがAUから出て、そのおかげで、ソフトバンクでiphone4持ったら実質無料でiPadやろ。すごいわこれは。もう普通の人はパソコン買わないと思うよ。
パソコンは事務用になると思う。

それにしても、このplayerの技術はさり気なく優秀です。
これで私のソフトバンクでHD動画撮影して、ちょちょいとタイトルくらいくっつけて、劣化させることなく画像を処理し、
iphoneでもキレイに見れる商用ページ作れるじゃん。(なぜか業界気分のときは東京弁になってしまうな)
堀江産婦人科様のも、全面的に作り替えたいと思いますが、ちょこちょこ説明を動画で入れたいです。
つくづく思うけど、この小さい端末で文章を読もうと思わないもん。 ましてや広告の。

カムタジアスタジオとかでキレイに見せられたらプレゼンぽくなり、広告効果があると思います。

でも、ipadの見え方が気になりますと、今度はiPhoneの見え方も気になるようになり、たぶんiPhoneもヤフオクゲットすることになると思うな。
そしてやってくれます西畑大先生! 
簡単に(ホント?)モバイルに対応させる便利なjQuery Mobile これ読まないといかんわ!(*^^*)
あ~めんどくさ。

html5になっていき、flash駆逐され、jqueryでmp3再生なんかもできるし…どんどん変わりますなぁ。大変ですわ。

というわけで…大変お待たせしましたが、初めてhtml5で堀江産婦人科のページを作りました!
私の能力が5くらい上がったと思います。
-->

*iPadは幅に気を遣うのと、フォバーができないというのがわかりました。iflameがあふれてしまいます。対応方法

星のリゾートとかどうするんだろうと見てみたら、やはりこういうPHPの分岐でフラッシュなしの、わりとつまんないページになっていた。 これからこういうところがiQueryが必要なんだよねぇ。 iPadみたいな端末である程度インタラクティブに見せられるようになりたいと思います。

こんなソフトでアニメも作れるらしい。ケッコウ有料版は情け容赦なく高いが…。

Adobe、「Flash Media Server 4.5」でiOSへのFlash動画配信を可能に ←ホンマに?2011年9月の記事そのバージョンのサーバーがどこにあるか教えて欲しい。ヘテムルはどうなんでしょう。

疲れたから…温泉に行きたい… ←この旅行のサイトはiPadで見ると、jqueryだけどiPhoneに特化したサイズで作られており、ちょっとがっかり。
でも便利な機能でよく考えられていると思う。 特に音声とかもないのですが。iPadなんか意識して作ったら皆便利に使うじゃないかな。
サイトというよりアプリになるだろうなと…。

ちょっと簡単なアプリも作れるようになりたいとか、野望が広がる秋であった。
時間がいくらあっても足りないです。

地球を守る脱原発バッチもしないといけない。私が欲しいものをパカパカ買える、日本の景気を守るため なんとかひとつ脱原発はよろしくお願いします。

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索