参考動画は先日 iOS 7 対応になった「Staccal 2」の美しい動画。
Original Movie
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
はじめに
いつもブログの下書きはモブログアプリ「Moblogger」で書いています。
ブログエントリに動画の貼り付けを行うことあるのですが iPhone から見ているページと パソコン（PC）から見ているページの動画表示（ページレイアウト）の差がかなり大きく、気になっていたので検討することにしました。
実験に使う動画の html は vimeo の［Share］から自動生成される埋め込み用のタグ＜iframe ...＞を使用し幅と高さ（width，height）サイズのみ変更させています。
なお iPhone 側での表示は blogger.com の標準テンプレート「モバイル」を使った状態での確認とする。
表記実験
●横幅（width）のみ指定し、高さは指定しない方法を検討
1.width="350" height=指定なし
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
2.width="80%" height=指定なし
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
3.width="100%" height=指定なし
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
●横幅（width）と高さ（height）のどちらも指定した方法を検討
4.width="350" height="197"
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
5.width="300" height="169"
Staccal 2 - Calendars and Reminders from Mobile and Design on Vimeo.
6.width="80%" height="80%"
2.と同じ
7.width="80%" style="height: auto;"
2.と同じ
8.width="100%" height="100%"
3.と同じ
考察
幅（width）と高さ（height）の数値を正確に指定した方法がもっとも綺麗に動画表示されることが分かった。表示幅（300 pixels）だと iPhone 側ではみ出さずちょうど良い。しかし PC 上では小さくて物足らない。表示幅（350 pixels）が iPhone 側で少し右にはみ出るが、PC 上でも見劣りせず良いようだ。
実験結果
●オリジナルで表記させた場合
iPhone：×
PC：◎
⇒iPhone 上では動画の横幅が右にはみ出るうえに全体のレイアウトも崩れた。（width="500" height="281"）したがって「vimeo」の［Share］Embed（埋め込み）htmlはそのまま使えそうにない。
●幅（width）と高さ（height）の数値を正確に記載した場合
iPhone：◎
PC：◎
⇒サイズの崩れがなく綺麗に表示される。最初の動画サイズから小さくした幅を得る方法。Photoshopなどの写真編集アプリ上で画像解像度変更させ数値を取得しているためかなり面倒(；´Д`A
※ vimeo の［Share］Embedの右にある［+ Show options］をうまく活用できないか？
●幅（width）指定、高さは指定しない場合
iPhone：◎
PC：×
⇒iPhone 上では綺麗に表示されたがパソコンからの表示は全体が大きくなるのではなく幅に黒枠が出来てしまい綺麗ではない。
iPhone 側から見た動画表示（ページレイアウト）のスクリーンショット
ひとこと
いままで iPhone から見ることを意識して貼り付け画像や動画サイズを決めていたが、意外とパソコンで見ると見栄えがしないこと多く悩んでいました。今回 vimeo 動画の貼り付けサイズ指定方法を検討して、だいたいどの程度大きさなら双方見劣りしないサイズ感なのかをつかめたような気がします。
この他にも方法があるのかもしれませんが、今回の実験は個人的に成果がありました。blogger.com はカスタマイズの自由度が低いのが難点ですが書き込める範囲内である程度は調整が出来たように思います。
私は blogger.com のデザイン自体をカスタマイズするほど知識がありません（汗）テンプレート内で書ける html でどの程度 iPhone 用・PC 用に適したサイズを見つけられるかを今回の目的としました。もし詳しい方いらっしゃいましたら、ご教授いただけると幸いです。どうぞよろしくお願いいたします。
Kazwoo
0 件のコメント:
コメントを投稿