当サイトは、動画の配信・視聴などテクニックの一般向け有効利用を目的に運営しています。
FancyZoomについて雑記 参照。
更新日2024/03/17サイトマップ&更新履歴を参照)
 

 
=スマートフォンで動画視聴時の推奨システム環境=
入手困難アプリ: ES File Explorerv4.2.0.3.4v4.2.5.0.1
Clean Master、 Screebl 、 Insta360 Air
下り回線速度実測値: 1.2Mbps以上。
あなたの回線速度計測は、BNRスピードテストをご利用ください。
過疎地域では必ずしもモバイルWi-Fi環境が良好とは限らないので、3G回線と使い分けてご視聴下さい。
<参考>スマートフォンでストリーム動画の再生(2012.09.15更新)
 主にNTTドコモのAQUOS PHONE SH-01Dで検証
1) Android標準ブラウザ等のWebKit系ブラウザは、HTML5ビデオのうち H.264/MP4とVP8/WebMに対応。Android 2.3では全画面方式のみでしか再生出来ないが、Android 4.0ではブラウザ植え込み方式でも可能となりました。
 
Firefox 15.0は、VP8/WebMとTheora/OGGを殖え込み方式で再生可能。Android 2.3では不安定だが、Android 4.0では比較的安定して再生出来るようになりました。
Opera Mobile 12.0は、H.264/MP4とVP8/WebMのスムースな再生が可能。Android 2.3では全画面方式のみで再生、Android 4.0では植え込み方式でも可能となりました。
Chrome 18.0はAndroid 2.3には未対応で、H.264/Mp4とVP8/Webを植え込み方式でも再生可能です。
2) Android用のプラグインは、六大ストリーミング動画のうち、Flash Playerのみしか提供されておらず Flashビデオ以外は再生出来ません。
 
・WebKit系ブラウザとOprea Mobile 12.0は、iPhoneの SafariやAndroidの Chrome 18.0とは違い Flashに対応しています。
Firefox 15.0はFlashに対応した。Android 2.3では極めて不安定でしばしば再生不能に陥ってしまうが、Android 4.0では比較的安定的に再生可能となりました。
・Android用のRealPlayer Beta(0.0.1.1)とWinamp(1.2.10)は、該当動画の再生用プラグインとして作動しません。
3) iPhoneはウェブ動画の再生技術としてのFlashを切り捨ててHTML5ビデオ(H.264/MP4)を採用してしまいました。一方、QuickTime技術は継承しそのムービーの再生は可能だが、QTtext字幕の表示は出来ず、QTVR パノラマムービーには未対応です。

<雑記>既存のPC用サイトをスマートフォン用に適応化(2012.3.11)
 I. Viewportでスマートフォン用に横幅を最適化
 
Viewportメタタグを<head>... ...</head>内に記述(こちらを参照)
 
<!--viewportの指定(ここの設定を変えてみる)-->
<meta name="viewport" content="width=device-width" />
<!--/viewportの指定-->
 
=成績=
Androidブラウザの場合
 
 
サイトの横幅が640px以下の場合には、横表示ではデバイスの横幅に合わせて表示する事が可能だ。一方、640px以上の場合にはフィットせず640pxより大きい部分は右にはみ出て表示されてしまう。
縦表示では、320pxを超える右側の箇所が非表示となってしまう・・・ Androidでは横幅を320pxで作成しないと、別の方策でもダメだ (>_<、)
 
iPhone Safariの場合
 
 
横表示でも縦表示でも、指定した横幅に完全フィットして表示可能な親切設計になっている。
但し、Flash入りのサイトの縦表示では上手く作動しない。

 

 II. iPhoneのSafari用に文字サイズを最適化
 
iPhoneのSafariで、PC用に作成した既存の当サイトをサイズのみを縮小して視聴したら、意図した文字サイズで表現出来なかった。一つのページで、ある領域の文字が巨大(サブタイトル部)又は極小(図の説明部)に表示されてしまう等ハチャメチャだった。そこで、こちらの記事を参考に以下1)~3)の対策に、ヒビヅレさんの対応方法 4)を追加した。
1)サイトの横幅は原則 640pxで、横向きを想定したデザイン
2)フォントサイズは10px以上の偶数のみ・・・ 別途、.moji14pt { font-size: 14px}などを記述したmoji.cssを作成
3)フォントにはMacの「ヒラギノ角ゴ W3」が推奨されているので、今回は font-familyにヒラギノ角ゴ Pro W3も記述
4)iPhoneが自動でフォントサイズを調整してしまうと云うお節介な機能を解除する為に、
CSSのbodyに -webkit-text-size-adjust: none; を記述
=以下は3),4)を記述したcommon.css 例=
 
@charset "Shift_JIS";
body {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, Osaka,"MS Pゴシック", "MS PGothic", Arial, sans-serif;
-webkit-text-size-adjust: none; /* フォントサイズ自動調整を解除 */
}
 
=成績=
諦めかけていたが・・・解決、ヒビヅレさんに感謝 \(^o^)/

なお iPhoneのSafariは、孤立した文字
| Kenのムービー計画へ > ムービー鑑賞導入コーナーへ |は
左寄せ表示となってしまうので、孤立させないよう調整が必要だった。


 III. アドレスバーを非表示にする
 
<script type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){ if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
window.onload = function() { setTimeout(doScroll, 100); }
</script>
 
=成績=
1) <body ...>内に onLoad="...;"が有ると作動しない(補足で対処)

2) Androidブラウザ:メニューページの切り替えで交互に:2回に1回は作動しない ?(゜_。)?
3) iPhone Safariでは、
 
 
・この処理をすると、別のページから当ページ内のリンク先(アンカーポイント)に飛んでくれなくなってしまう・・・<a name=”02″ id=”02″>■</a>でも対処出来ない Y (>_<、)Y
・Flashビデオが読み込めないページの縦表示では上手く作動しない。
 
<補足>
 
 
こちらのページの場合は、javascript のwindow.onload に時間ページジャンプ(setTimeout('NextPage()',  )に加えて、前もってonloadする必要がある為、「onloadが複数で困ったら(Javascript編)」を参考に対処した。
 
<script type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){ if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
addOnload(function() { setTimeout(doScroll, 100); });
// onloadイベントを追加する。
function addOnload(func)
{
try {
window.addEventListener("load", func, false);
} catch (e) {
// IE用
window.attachEvent("onload", func);
}
}
</script>

  IV. HTML5ビデオを自動再生させる
 
現時点でのAndroidは、HTML5のvideoタグのautoplay属性の指定を無視するように実装されています。
これを敢えて回避する方策として、playする前にloadするJavascript を <head> </head>内に記述しておく方法がある(こちらの参考ページから引用)。
<script type="text/javascript">
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
</script>
そして、VideoタグにIDを定義して <video id="myVideo" src=... controls autoplay>  と記述する
 
<補足>
 
 
こちらのページの場合は、javascript のwindow.onload に時間ページジャンプ(setTimeout('NextPage()',  )に加えて、前もってonloadする必要がある為、「onloadが複数で困ったら(Javascript編)」を参考に対処した。
 
<script type="text/javascript">
addOnload(function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
});
// onloadイベントを追加する。
function addOnload(func)
{
try {
window.addEventListener("load", func, false);
} catch (e) {
// IE用
window.attachEvent("onload", func);
}
}
</script>

 
=成績=
1) ビデオの再生開始が遅延して、ページジャンプの指定時間よりもビデオの終了が遅れると、自動でプレイヤーを閉じる事が出来なくなってしまう。従って、余裕を持ってジャンプ迄の時間を指定する必要がある。
2) iPhone(iOS 5.1)のSafariでは作動しない。
3) Android 2.3のOpera Mobile12では自動再生させる事が出来ない・・・早期にスタートボタンをタップしないと再生出来なくなってしまう不都合が発生する場合がある
┓(´_`)┏
4)Android 4.0標準ブラウザでは自動再生させる事が出来なくなってしまった。Chrome 18も作動しない。
なお、Opera Mobile12はautoplayに対応した。

 
<備考>本格的にスマートフォン用サイトを作成
 「スマートフォンサイト制作 ハンドブック」[単行本]の紹介
 
iPhoneやAndroidスマートフォン用のWebサイト制作に必要なデザイン、コーディング、プログラミングのノウハウをコンパクトにまとめた解説書です。スマートフォンサイトの受注から、デザイン、コーディングにあたって注意すべきポイント、サンプルサイト、シュミレータのインストールと使い方、リダイレクトやアドレスバーの隠し方といった実践的なテクニックまで解説しています。
サイトを本格的に制作し直す場合に、参考とすべき事項が網羅されています。ボリュームは200ページ。サンプルを こちらから入手可能です。
著者 株式会社CREAMU/嶋田智成
価格 1680円(税込)
発行 秀和システム
 
<例1>アドレスバーを非表示にする(p42)
  上記IIIを参照
 
 
<例2>jQuery Mobileの利用を推奨(p46)
  使用方法については、西畑さんの「jQuery Mobileデザイン入門」を参照。
 
 
<例3>自動切換えバナーとバルーンポップアップの設置
  既存のPC用サイトをスマートフォン用に適応化」の追記を参照。
   

 
copyright '11 Ken's Movie.AllRightReserved.