FLASHファイルの スマホ対策  安倍

Flashファイル( .SWF )は iPhone, Android には対応していないのでスマホ、iPadでは非表示になる。
また、スマホの標準動画形式 .MP4 は、普及しているHTML4のホームページへの埋め込みはできない。 

ホームページで スマホ、iPad、Windows どれでも見えるようにするにはいくつかの方法があるが
いずれも簡単ではない。
簡単な対策として
・PCではFLASH動画、スマホで静止画表示にする。 あるいは、
・SWF を MP4ファイルに変換してYouTubeに投稿し、このURLをHTMLファイルに埋め込む。
のいずれかの方法がよい。

PCはFLASH動画、スマホで静止画表示
 

方法1: http://www.tecblo.com/?p=295
  (ただし、FireFoxでは全く表示せず。スマホは静止画表示)

  この方法で試作
  http://1939abe.web.fc2.com/pc/hp/flash/smapho/net1.htm 

 この方法で
意図的文法ミス(object → zzobject)を記述してFlashを非表示にした  
 スマホ疑似表示
 http://1939abe.web.fc2.com/pc/hp/flash/smapho/net1damy.htm

   
方法2: JavaScript (swfobject.js) 使用 
  ※)コード編集にミスがあるとIE Ver.9で2重表示となることがあるのでチェックが必要。
    http://1kb.jp/blog/archives/233

  この方法で試作
  http://1939abe.web.fc2.com/pc/hp/flash/smapho/seikei.htm 
  

 この方法で意図的文法ミス(object → zzobject)を記述してFlashを非表示にした  
 スマホ疑似表示 
 http://1939abe.web.fc2.com/pc/hp/flash/smapho/seikeidamy.htm

PC / スマホ 両者で動画表示

1).SWF を MP4ファイルに変換してYouTubeに投稿し、このURLをHTMLファイルに埋め込む。(自分のサーバを消費しないので推奨)
 (ただし、ホームページ表紙の題字画像には応用できない。

2)SWF を MP4ファイルに変換してHTML5でホームページに埋め込む。 
 ただし、この方法は閲覧者端末の古いブラウザには対応しない。 → こちら

3)変換ソフトを使用し.SWF を .WMV に変換すればホームページに埋め込む。PC/スマホ両者で閲覧できる。
 ただし、ファイル容量が40倍にもなる。

4)スライドショー(画像切替え)の場合はFlashをやめてJavaScript にする。→ こちら 

PC / スマホ 自動切り替えで動画表示 高度な手法

閲覧者の端末に応じてPC用動画ファイルか、スマホ用動画ファイルか、自動で振り分ける。
http://allabout.co.jp/gm/gc/386483/
この方法は、サーバ側の機能(.htaccessなど)を使う必要があり、その設定を利用できるサーバが必要がある。

その他、自動切り替えの手法

   http://digitalnomori.hatenablog.jp/entry/2014/03/15/184004
   http://se-suganuma.blogspot.jp/2011/12/html5-or-flashjavascript.html
    http://okwave.jp/qa/q1395440.html 

HTML5での動画制作アプリ
・Flashを一切使わず、PC/スマホ両者で動作。 ファイルは、CSS/JavaScript/HTML5で構成する。 VISTAでは動作せず。
http://bit.ly/2ssGJga

Google WebDesigner
http://www.google.com/webdesigner/
Edge Anime
http://ascii.jp/elem/000/000/779/779058/


※) 方法2 の操作  

swfobject.js と、代替静止画像を用意

・head内に下記2行挿入

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("title", "9.0.0", "seikei.swf");</script>

・本文flashの <object></object>(2ケ所)を入れ替え

<object id="title" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="160">
<param name="movie" value="title-n.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="title-n.swf" width="800" height="160">
<!--<![endif]-->
<div><img src="image/title_seishi.jpg" width="800" height="160" alt="Title Logo" /></div>
<!-- ↑ここで代替画像を指定する。別に画像でなくてもテキスト等でも可 -->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>


関連ページ

・ムービーのHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/movie.htm#it

・YouTube を利用したHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/you-tube.htm#it

・CumStudio による動画取得
http://1st.geocities.jp/kyokuyu/pc/hp/slideshow/camstudio.htm

・WebサイトからのFLASH 収集と改造
http://1939abe.web.fc2.com/pc/hp/flash/pacri.htm


ホームページ作成体験

inserted by FC2 system