Amazin Sliderで自前サイトの動画用スライダー(1)
Amazing Sliderで自前サイトの動画用スライダー(1)

=ビデオLightBox付きjQueryスライダーでホームビデオのプレイリスト表示＝
Firefox, Operaは、素材がMP4のみでは HTML5ビデオとして再生出来ない ┓(´_`)┏
⇒ (2)「Firefox, Operaは、WebMなら HTML5ビデオとして利用可能」で検証
素材：MP4動画のみで配信
（2014.10.29作成, 16.05.17更新）
ビデオ Lightboxは、最初の ”オープニングムービー” にのみ表示されます。　From Xserver
Amazing Sliderは、Youtube, Vimeoからのビデオ以外にも、自前サイトのビデオ（MP4, WebM動画)の読み込みも可能だ。そこで今回、Amazing Slider 4.5を用いて スキン: Light、トランジション: 各種、test effect: Gray boxに設定して、ビデオ LightBox効果の付いた jQueryスライダーによるホームビデオ（スペイン旅行)のプレイリストを試作してみた（但し、LightBoxでの表示は Firefox, Operaでは不都合なので オープニングスライドのみとし、その他は埋め込み表示とした)。
＜要約＞
 
多彩なスキンや画面切り替えはカスタマイズ可能で見栄えもマズマズだ。
WOW Slider 7.0と比較すると（「WOW Sliderで...プレイリスト表示」を参照)、カスタマイズ出来る項目が豊富すぎて ”写真のパン&ズーム演出”や ”説明文字のモーション表示”は可能なのか分からないが、残念ながら ”楽曲BGMの挿入”は出来ない。
Firefox, Operaはスライドショー可能だが、何故か？LightBoxでのビデオ再生が出来ない。
　
＝使用方法＝
入手先：Amazing Sliderは、こちらから入手（今回は、Amazing Slider 4.5を使用)。
使い方は、「jQueryスライダーチュートリアル」ないし「Amazing Slider - FC2」を参照。
先ず、動画（今回は、スペイン旅行の動画：720x408, H.264圧縮MP4のみ。WebMはパス)とそのプレビュー用画像をローカルに準備する。
＜注意＞日本語フォルダ内の画像を使うとパブリッシュ出来ないと云う。 パブリッシュで出力されるファイル名はそのまま元の名が使われるので、英語で準備する事。
起動画面で、(1)[スライド追加]ボタンをクリック。
1)
スライド追加（Add slides)
「スライド追加」画面で、スライドのサイズを設定しておいて（今回は、640x360)、[Add video]ボタンをクリック。
「Add video」画面で、画像と動画（今回は、MP4のみ)を読み込む（なお、ここではレンタルサーバ保存のビデオを http://kakonacl.xsrv.jp/spain/...mp4で読み込む事は出来ない)。
下段の「スライド内容」項目にタイトル、詳細（説明コメント)を記入し、
text effect：18種類から今回は Gray boxを選択しようとしたが文字のサイズを設定出来ないので、スキンオプションのテキスト効果で設定する事とする。
autoplay interval：3000msに設定。
「クリックしてウェブリンクを開く」項目：最初の”オープニングムービー”のみ [ウェブアドレスを開く]とせずに、[Lightboxで現在のビデオまたは大きなサイズの画像を開く]とした・・・パブリッシュ時に指定し出力したフォルダ内のビデオ又は画像が開かれる（ [Lighrtboxサイズ設定]を 640x360とした)。
 
”オープニングムービー”以外のスライドは、[ウェブアドレスを開く]とした（ここでは、http://kakonacl.xsrv.jp/spain/...mp4とせずに空白としておく)。
 
 
そして、動画及び画像へのリンク先を 下記で編集・修正した。
なお、[全てのスライドにオプションを適用する]は上手く機能しない不具合がある。
2)
スキン
スキン 37種類から、今回は「Light」を選択。
 
スキンオプションのカスタマイズ
a) テキスト効果で、Text Effect：18種類から今回は Gray boxを選択。フォントのサイズを Title：14→18pxへ、Description：12→16pxへ変更した。
b) ナビゲーション（Navigation)で、サムネイルナビゲーションのスタイル： imageonly　→imageandtitle へ変更。
c) 境界線と影（Border and shadow)で、Boder 4→0、[影表示]と[株の影表示]をチェック。
 
d) 背景の [リボン画像表示]で自分のロゴの追加が可能だが、無料版では右上のウォーターマーク「Free Version」を削除出来ない。
3)
トランジション効果（Transition effects)
トランジション効果 10種類より選択。少々カスタマイズ可能。
・[スライド]時間(分)： 1000→3000に変更　＊分の訳は、ミリ秒の間違い。
＊クロスフェードにするには、「クロスフェード」でなく、「フェード」を選択。「クロスフェード」を選択するとフェードアウトとフェードインが別になる。と云う。
4)
再生設定（Playback options)
・スライダーオプションで、[スライダーに必要な上下余白を追加する]と[Create a responsive slider]にチェック。
・自動再生インターバル（一枚の写真の表示時間、ミリ秒)：5000 →3000に変更。
5)
パブリッシュ
Publish to folder：保存フォルダを指定し、ファイルネームを記入して出力。
＊スライダーIDは、ページに複数のスライダーを入れる場合に違うものとする。
　6)出力されたHTMLファイルの編集・修正
 
画像と動画のリンク先をローカルからレンタルサーバ Xserverへ変更。例えば、
a href="images/00openning.mp4" →"http://kakonacl.xsrv.jp/spain/...mp4"
とレンタルサーバの URLアドレスへ変更して、
局所フォルダ内の「images」フォルダ（動画も含む)を Xserverへ配置を変更する。
そして、「sliderengine」というフォルダをスライダーのページと同じ場所にアップロード。
＝各ブラウザによる再生成績＝
1)
PC（Win8.1)
・IE11, Chrome38.0, Safari5.1.7：問題なくスライドショーの閲覧可能。動画は HTML5ビデオとして再生可能。
・Firefox32.0, Opera25.0：スライドショーの閲覧は可能。動画の埋め込みは Flashビデオとして再生可能だが、LightBoxでの再生は不可・・・LightBoxでの再生は HTML5ビデオとしてしか再生出来ないのだ ┓(´_`)┏
Firefox, Operaは Flash無効環境では再生出来ない・・・H.264/MP4に対応しているのに、この配信システムでは何故 HTML5ビデオとして再生してくれないのであろう？
追記(2014.11.15)
⇒素材に WebM動画を追加すれば、HTML5ビデオとして再生可能となる !!
「MP4とWebMで配信：Firefox, OperaはWebMをHTML5ビデオとして利用」で検証。
2)
dTab01（Android 4.1.2)
・標準ブラウザ, Chrome38.0：ほぼ問題なく閲覧・再生可能。
・Firefox33.0：スライドショーの閲覧は可能。動画の埋め込み再生は（Flash導入環境では)可能だが、LightBoxでの再生は不可。
・Opera25.0：スライドショーは可能だが、（Flashに未対応の為)動画の再生は埋め込み方式でも出来ない。
3)
iPad mini（iOS 8.1)
・Safari：閲覧・再生可能（但し、LightBoxでの動画の再生は全画面表示すれば可能となる)。
・Puffin4.0.4：多少表示迄に時間が掛かりガクガクとなるも、閲覧・再生可能（動画の再生は Flash無効環境でも可能だが、全画面表示出来ない)。
   
追記（2016.05.17)：こちらのサンプルで、最近のブラウザの対応状況を再検証した。
 
スライドショーの閲覧は、全てのブラウザで可能。
動画の再生は、H.264/MP4動画に対応のブラウザでは HTML5ビデオとして再生されるが、未対応のブラウザは Flashビデオとして再生される仕様のようだ。
しかし、Firefox, Operaは H.264/MP4に対応しているのに、この配信システムでは何故か？ HTML5ビデオとして再生してくれない。
1)
Windows10ブラウザ
・IExplorer11, MS Edge25, Chrome50, Safari5.1.：動画は HTML5ビデオとして再生される。
・Firefox46, Opera37, Opera12.17：動画は Flashビデオとして再生可能（Flash無効環境では再生出来ない)。
2)
a)MacOSX 10.10.5ブラウザ
・Safari9.1, Chrome50：HTML5ビデオとして再生。
・Firefox46：何故か？ 偶々 Flashが作動せず動画の再生が出来ない。
・Opera36：Flashビデオとして再生（Flash無効環境では再生出来ない)。
2)
b)MacOSX 10.7.5ブラウザ
・Safari6.1.1, Chrome49：HTML5ビデオとして再生。
・Firefox46：Flashビデオとして再生。
・Opera37：何故か？Flashが導入されず動画の再生が出来ない。
・Opera12.16：Flashビデオとして再生（Flash無効環境では再生出来ない)。
3)
Android 5.0.1ブラウザ（GALAXY Note Edge SC-01G )
・標準ブラウザ, Chrome50：スライドショーの閲覧と動画の再生可能。
・Firefox46：Flashビデオとして再生可能（Flash無効環境では再生出来ない)。
・Opera36：元々 Flashは作動せず、動画の再生は出来ない。
4)
iOS 9.3.1ブラウザ （iPad mini)
・Safari, Puffin5.0.2：スライドショーの閲覧と動画の再生可能。