極意(30)動画再生いろいろ

動画再生するおまじないとして、HAIKテーマでは#video、
HAIK以前の旧バージョンでは #playvideo が使われています。
今回、HAIK環境で両方のプラグインの動作検証をしてみました。


はじめに(前準備として)

まずは、公開したい動画を用意してください。
一般的に使われる動画の形式は、mp4、mov、swf などです。
また、#playvideoプラグインでサポートする形式は、mp4、swf、mov、ram、wmv、avi、flv など沢山あります。
新しいプラグイン#videoでサポートする形式は、mp4のみです。

動画をサーバーへアップロード(設置)する場合、FTPソフトを使います。
QHMで添付すると、ファイルが大きすぎるため、必ずFTPソフトでレンタルサーバー上に事前にアップロードしておきます。
但し、ファイル容量が2MBまででしたら、簡単アップローダー(SWFU)でアップロード可能です。

※フォルダ名や動画のファイル名には、必ず半角文字の英数字を使って下さい。
日本語や空白(スペース)が入ってはいけません。


#videoプラグインで標準再生

[check]上記のおまじないです。

#video(Clip_480_5sec_6mbps_h264.mp4,4:3)

[check]解説します。

  1. 上記の「4:3」は、動画のアスペクト比で省略時は「16:9」でワイド仕様になります。
  2. 動画の表示サイズは、コンテンツ幅一杯に拡大表示されます。


#videoプラグインでのオプション指定

[check]オプションとして、動画のスタート用画像を指定する場合

[check]上記のおまじないです。

#video(Clip_480_5sec_6mbps_h264.mp4,4:3,PublicPhote01.jpg)

[check]解説します。

  1. 上記の「4:3」は、動画のアスペクト比で前記と同じです。
  2. 上記の「PublicPhote01.jpg」は最初に表示される静止画です。
  3. その静止画は、動画のサイズに合わせた大きさに表示されます。
  4. その静止画をクリックして動画がスタートします。


再生ボタンからポップアップ動画を再生

[check]上記のおまじないです。

&video(Clip_480_5sec_6mbps_h264.mp4,4:3){&icon(fa,play-circle-o,3x);};

[check]解説します。

  1. このケースでは、#video ではなくて &video が使われます。
  2. 上記の「4:3」は、動画のアスペクト比で前記と同じです。
  3. 上記の「&icon(fa,play-circle-o,3x);」は、再生ボタンを表すアイコンです。
  4. その再生ボタンをクリックして動画がスタートします。


サムネイルからポップアップ動画を再生

douga01.jpg

[check]上記のおまじないです。

&video(Clip_480_5sec_6mbps_h264.mp4,4:3){&show(douga01.jpg);};

[check]解説します。

  1. このケースでは、#video ではなくて &video が使われます。
  2. 上記の「4:3」は、動画のアスペクト比で前記と同じです。
  3. 上記の「&show(douga01.jpg);」は、サムネイルを表示するおまじないです。
  4. そのサムネイルをクリックして動画がスタートします。


対象の動画がYouTubeだったら?

douga01.jpg

[check]上記のおまじないです。

&video(https://youtu.be/NszdNYDN-Z8){&show(douga01.jpg);};

[check]解説します。

  1. このケースでは、動画のURLとしてYouTubeの共有のURLを指定します。
  2. 上記の「&show(douga01.jpg);」は、サムネイルを表示するおまじないです。
  3. そのサムネイルをクリックしてYouTubeが別画面でスタートします。


#video と &video の違いに注意!!

筆者も最近になって気が付いたことですが、haik環境での動画再生には、
#video と &video の2タイプのおまじないがあります。

[check]#video の一般型

#video(ファイル名,オプション-1)

[check]&video の一般型

&video(ファイル名,オプション-1){オプション-2};
  1. オプション-2には、前記の再生ボタンのアイコンや、起動用のサムネイル画像等を指定します。
  2. &videoで指定された動画再生は、IE11では正常に動作しない場合があります。


旧バージョンの#playvideoで動画再生・その1

下記の動画はIE11では起動しますが、IE11以外では起動しません。

[check]上記のおまじないです。

#playvideo(swfu/d/Wildlife.wmv,630,400);


旧バージョンの#playvideoで動画再生・その2

下記の動画はIE11では起動しますが、IE11以外では起動しません。

[check]上記のおまじないです。

#playvideo(swfu/d/ONTARIO.wmv,450,300);


#playvideoでMP4を動かしてみた

[check]上記のおまじないです。

#playvideo(swfu/d/Clip_480_5sec_6mbps_h264.mp4,540,360,swfu/d/douga02.JPG)



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 3  
    役に立たなかった 0  


ご意見箱