prettyPhoto モーダルウィンドウで動画

投稿日 2013/11/27   更新日  ネット関連

ちょっと個人用に、prettyPhotoを応用してみる
埋め込みでもいいのですが、テキストリンクからモーダルウィンドウで表示させてみます

サンプル

prettyPhotoの表示サンプルです
-> DEMOページ

You Tube：「t」のパラメータが使えないのが残念だなあ
サンプル：The Wind Rises - Official Trailer - YouTube

<a href="http://youtu.be/imtdgdGOB6Q?rel=0" rel="prettyPhoto" title="The Wind Rises - Official Trailer">The Wind Rises - Official Trailer - YouTube</a>

Quicktime：アップルのトレーラーサイトは、パーマリンクを知るのが一番難しい（笑）
シングル
サンプル：12-12-12 - Movie Trailers - iTunes

<a href="http://movietrailers.apple.com/movies/weinstein/121212/121212-tlr_480p.mov?width=848&height=480" rel="prettyPhoto" title="12-12-12">12-12-12 - Movie Trailers - iTunes</a>

グループ
サンプル：
Beyond Outrage - Movie Trailers - iTunes
Man of Tai Chi - Movie Trailers - iTunes

<a href="http://movietrailers.apple.com/movies/magnolia_pictures/beyondoutrage/beyondoutrage-tlr1_480p.mov?width=848&height=352" rel="prettyPhoto[movies]" title="Beyond Outrage">Beyond Outrage - Movie Trailers - iTunes</a>
<a href="http://movietrailers.apple.com/movies/independent/manoftaichi/manoftaichi-tlr1_480p.mov?width=848&height=352" rel="prettyPhoto[movies]" title="Man of Tai Chi">Man of Tai Chi - Movie Trailers - iTunes</a>

Vimeo：Vimeoは通好みだよね
サンプル：ALL THE TIME - Vimeo

<a href="http://vimeo.com/78856687" rel="prettyPhoto" title="ALL THE TIME">ALL THE TIME - Vimeo</a>

prettyPhotoはファイルの保管場所さえ確保できれば、Bloggerでも簡単に設置できます
あと、既存の画像や動画に属性を加える作業を苦としなければ…
標準の画像表示だけでは物足りない人向けですね

PCではプラグインさえ入っていれば問題なく再生できるのでアンドロイドでも検証しました
Android 4.4(KitKat)でも再生可（Next ブラウザ使用）
Vimeoはユーザーエージェントの設定とかプレイヤーの操作に条件あり
いや、HTML5での再生に条件ありと言ったほうがいいのかな？
Quicktimeは無理で当たり前