既存のFlash(.swf)を改造して動画をタイトルに使う方法
       --
スマホ対策 -- 
  安倍

Flashファイル( .SWF )は iPhone, Android には対応していないのでスマホ、iPadでは非表示になる。
その対策をいくつか紹介する。

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

PCはFLASH動画、スマホで静止画表示
 
 下記方法 1, 2 とも従来のSWFを使う。

方法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-1).SWF を MP4ファイルに変換してYouTubeに投稿し、このURLをHTMLファイルに埋め込む。(自分のサーバを消費しないので推奨)
 タイトル画像用には、Autoplay およびYouTubeのロゴマーク非表示の設定が必要 → こちら

1-2)上と同様にStorage のGoogleDriveに投稿し、このURLをHTMLファイルに埋め込む。(YouTubeと同様に自分のサーバを消費しない)
ただし、Autoplayは動作せず、スタート画面が乱れる場合があるのでタイトル画像には適していない。 → こちら
OneDriveはAutoplayになるがスタートに遅れが生じる。DropBoxは埋め込みコードの提供がない。

2-1)SWF を MP4ファイルに変換してHTML5の
<video src="fujio.mp4" width="800" height="160" autoplay ></video>
のようにホームページに埋め込む。 
 ただし、この方法はスマホで動かず対応しない。 → こちら

2-2) 同様にHTML4の<embed>タグで埋め込むと、→ こちら
 このように制御バーが最初に表示されるがまあまあ動く。
ただし、スマホではAutoplayは、そのタグを挿入しても動作しない。
HomePage Builderの場合、  挿入→ ファイル でMP4ファイルを指定すると
この方式になり以下の<embed>タグが挿入される。
<embed src="fujio.mp4" type="video/mp4"width="800" height="160">

このコードに以下のように autoplay="" を追加してもスマホでは機能しない。→ こちら
<embed src="fujio.mp4" type="video/mp4" width="800" height="160" autoplay="">



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