Flashに代わって 動画をタイトルに使う方法 　　改 2018/3　安倍

ホームページ表紙冒頭にふさわしい動画は、かつてはFLASH(SWF)全盛でしたがスマホに対応しないことや、ウイルスへの脆弱性のために急速消えつつある。
では、FLASHに替わる方法は何がいいか。　方法は以下が考えられます。　〇推薦　×非推薦

1)〇　jQuearyを使う。 スマホでも動作し,、YouTubeなどの外部Storageを使わない。
　何枚もの静止画をスライドショーにする。　この方法は動画は単調だが簡単で静止画の交換だけで変更ができる。
　容量も静止画のみで小さい。　PC, スマホ 両者でAutoStart可能。その場合、音声と組み合わせた場合音声をAutoStart設定すると
　スマホでは動作しない。　AutoStart設定しないと音声の▶ボタンが画像と別位置でPCでは問題ないがスマホでは小さく適さず。
　すなわちスマホには音声は適さず。
　試作例：　　http://1939abe.web.fc2.com/　ネット上のjQueryをHTMLから直リンクで使用　　jQuery 引用：Black flag　
　　参考：http://1939abe.web.fc2.com/pc/hp/j-script/swap/swap.htm　　

　ネットでの例
　http://digitalnomori.hatenablog.jp/entry/2014/03/15/184004　　

　https://codingmania.net/jquery/805.html　　

PCはFlash動画、スマホは静止画像にする
この方法はSWFファイルをそのままネットに掲載するので、閲覧者に対してウイルスの危険性の表示がでることがあり避けたほうがいいであろう。

2ー1）×　ネット情報　http://www.tecblo.com/?p=295　
　　(ただし、FireFoxでは全く表示せず。スマホは静止画表示)

　　この方法で試作
　　http://www.ab.cyberhome.ne.jp/~take-abe/hozon/pc/hp_menu_swf.htm　
　　http://1939abe.web.fc2.com/pc/hp/title/dooga-title/net1.htm　

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

　　　
2－2）×　JavaScript　（swfobject.js） 使用してスマホで静止画像にする。
　　※）コード編集にミスがあるとIE Ver.9で２重表示となることがあるのでチェックが必要。
　　　ネット情報　　http://1kb.jp/blog/archives/233　

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

3）〇　YouTubeの利用：　動画を、VClipなどの動画キャプチャアプリでキャプチャしてMP4に変換する。　あるいは、
W-MovieMakerでスライドをMP4に加工して YouTubeに投稿し、ここでHP埋め込みコードを取得。
これに autoplay=1 のコードを追加してHPに埋め込む。　音声も可能。
スマホではAutoplay設定が対応せず、画面中央▶の手動ボタンによるスタートとなる。
　例
　　　　http://www.ab.cyberhome.ne.jp/~take-abe/hozon/pc/hp_menuYou.htm　

4)×　Gドライブの利用：　これダメ。
Gドライブを使うと、どういうわけかSWFのoCamキャプチャでも下記のようにスタート 画面が潰れ、
かつ、▶ボタンがでてAutoStartにならない。HP表紙の冒頭がこれではアカン。
　　http://www.ab.cyberhome.ne.jp/~take-abe/hozon/pc/hp_menuGd.htm　　

5)×　Oneドライブの利用：　セキュリィのためかネット上の動作不安定。
　　http://1939abe.web.fc2.com/pc/hp/title/dooga-title/hpOne.htm　

6)〇　HTML5 videoタグ使用　　（HTML4の embed タグはスマホには対応しない）。
MP4をHTMLと同じサーバー に置くと容量を喰いすぎるので2）法ではYouTubeに置いたが、4）法は MP4を余裕のある別の
HPサーバーに置いて、 ここにHTML5の<video>タグで直リンクする。　具体的にはMP4をフリーのHPサーバーに置くといい。
本体のHTMLは自分のサーバーだからウザッタイ広告は 一切なし。　YouTubeのような著作権保護の警告もなし。
PCでは自動再生や、loop再生もできる。
スマホではAutoPlay は対応せず、画面中央の▶手動ボタンでスタートする。

　　　http://1939abe.web.fc2.com/pc/hp/title/dooga-title/kame5.htm　

　　　http://www.ab.cyberhome.ne.jp/~take-abe/hozon/pc/hp_menuHtml5a.htm　

　　文献：https://blog.codecamp.jp/html5_video　

6-2)×　同様にHTML4の<embed>タグで埋め込むと、なぜか、両サイドが狭くなる。　
　　http://1939abe.web.fc2.com/pc/hp/title/dooga-title/hp4.htm　
　　大きな制御バーが最初に表示する。
ただし、スマホではAutoplayは、そのタグを挿入しても動作しない。
HomePage Builderの場合、　 挿入→ ファイル　でMP4ファイルを指定すると
この方式になり以下の<embed>タグが挿入される。
<embed src="fujio.mp4" type="video/mp4"width="800" height="160">

このコードに以下のように　autoplay=""　を追加してもスマホでは機能しない。→
　　http://1939abe.web.fc2.com/pc/hp/title/dooga-title/hp4b.htm　　
<embed src="fujio.mp4" type="video/mp4" width="800" height="160" autoplay="">

｜　旧ページ　｜　ホームページ作成体験　｜