HTML5 Video機能

 動画を扱う機能です。動画を

  ・同一フォルダー内に格納して使う方法 と

  ・遠隔(外部)動画を扱う方法

があります。今まで扱った同様なアプリには、後者のような機能は無かったように記憶しています。

 後者を利用すると、公開(Share)の領域を少なくすることが出来るメリットがある。

 

 tonidoに存在する ファイル(ここではvideo)の設定の仕方を説明します。

 Wysiwyg で tonido に存在する ファイルを使用する場合を説明します。

Wysiwyg を使わなくてもHTML知識があれば、直接コマンドを入力すれが良い事ですが、HTMLの知識が無い場合、Wysiwygを使った方が簡単である。しかも、wysiwyg はホームページ作成の強い味方であるのでこれをマスターすればスキルアップにもつながります。ここでは、Video で説明しますが、音及び写真でもほぼ同じです。

 ・単体videoを扱う場合()

 ・複数videoを扱う場合(例1 例2)

HTML5 Video(単体videoを扱う)場合

 

Insert > Htal5 Video でvideo の領域を確保します(下記図のように)

 ※前もって、下記の様にWysiwygでサイズ別 site を作成しておくことを推奨。

 

 ※videoサイズは wondershare で作成されたものに影響されます。

推奨は、480x320 又は 640x480 のサイズです。

 

領域上で左クリックする。下記図を表示。

 

  □Auto start は自動スタートするか否かの設定

   □Show controls は閲覧者に音の高低及び進行をコントロールさせるか否かの設定。

 ① 前者にレを付けて、後者にもレを付る場合、ある程度閲覧者の自由意志

 ② 前者に付けず、後者にも付けない場合、そういう指定はダメ。写真だけの表示になります。 

 ③ 前者に付けて、後者に付けない場合、閲覧を強制させる事になります。

 ④ 前者に付けず、後者に付ける場合、閲覧者の完全自由意志

  

一度、プレビューして観て下さい。 

プレビューで確認したら、wysywig に戻り、右クリックし Object Html を選択し、General Htlm をコピー。 

更に、「写真をクリックしたら動画を流す」場合

 もう少し、進化しましょう。

例えば、Video/動画という事は伏せて、写真をのせそれをクリックした時、動画が流れる といったものを作りたいと思いませんか? 風景写真、卒業写真の各人の動画を流す といったことも同じです。

 その場合の作り方に進みます。

Lightbox を選択し、□にレをつけ、写真(URLでもOK)を指定します。