FineVisローカルビデオコンポーネント

応用シーン：「FineVisデータ可視化」プラグインをインストールしたユーザは、本文を参考にしてFineVisの関連機能を理解することができます。

1.バージョン

2.機能概要

[ローカルビデオ]コンポーネントを使用すると、各種の組み込みビデオ、カスタムビデオまたはオンラインビデオを表示できます。

サポートするビデオタイプは3種類です：

 · [リソースセンター]：[自分のリソース]から選択でき、組み込みのビデオ素材が含まれています。

 · [カスタムビデオ]：ユーザが自作でアップロードしたローカルビデオで、webm、mp4、mov、oggの4種類の形式のみサポートします。

 · [オンラインビデオ]：[オンラインビデオ]の絶対アドレスを呼び出します。同様にwebm、mp4、mov、oggの4種類の形式のみサポートし、[ダイナミックバリュー]の挿入をサポートします。

注意：Chromeブラウザ120以降のバージョンでは、ogg形式のビデオ再生をサポートしなくなりますので、他の3種類の形式にアップロードしてください。

本文では[ローカルビデオ]コンポーネント特有の機能のみを紹介し、その他の属性については省略します。

[ローカルビデオ]コンポーネントは「FineVisコンポーネントのインタラクション属性」をサポートしていません。

コンポーネントの動画については「FineVisコンポーネントの動画」を参照してください。

コンポーネントの属性については「FineVisコンポーネントのスタイル属性」を参照してください。

「可視化カンバン」を新規作成します：

ページ内に[ローカルビデオ]コンポーネントを新規追加すると、デフォルトで「右側で画像を選択してください」が表示されます。以下の図のように：

1.リソースセンター

[ビデオタイプ]を[リソースセンター]に選択すると、[自分のリソース]内のビデオ素材を選択できます。ただし、[オンラインリソース]はサポートしていません。

[ローカルビデオ]コンポーネントを選択し、[内容]をクリックします。[ビデオタイプ]を[リソースセンター]に選択し、[選択]をクリックして必要なビデオを選択した後、[完了]をクリックします。

以下の図のように：

2.カスタムアップロード

ユーザは事前にローカルで準備した素材ビデオをテンプレートにアップロードして使用できます。

2.1ビデオのアップロード

[カスタムアップロード]を選択した後、[選択]をクリックし、[+ビデオアップロード]をクリックすると、ローカルのビデオファイルを選択してアップロードできます。複数のビデオファイルの一括アップロードもサポートします。

サポートするビデオファイルはwebm、mp4、mov、ogg形式です。

注意1：形式の要件を満たすために手動でビデオファイルの拡張子を変更しないでください。これによりリソースのアップロードに失敗する可能性があります。

注意2：アップロードするビデオのサイズに制限はありませんが、カクつく現象が発生した場合は、本文の第5章を参照してください。

2.2ビデオの削除

ビデオリスト中、対象のビデオにマウスを合わせると、ビデオの右上に削除ボタンが表示されます。

[削除]ボタンをクリックすると、「このソースを削除すると、このソースを使用している全てのコンポーネントに影響を与えます、削除を確認しますか。」という確認ダイアログが表示されます。[削除を確認]をクリックすると、該当のビデオ素材を削除できます。

もし、ある[ローカルビデオ]コンポーネントが削除されたビデオ素材を使用している場合、プレビュー時に該当のコンポーネントの内容は空になります。 

3.オンラインビデオ

[ローカルビデオ]コンポーネントは[オンラインビデオの呼び出しをサポートします。ただし、サーバが入力したビデオアドレスにアクセスできること、および呼び出すビデオソースファイルがwebm、mp4、mov、ogg形式であることを確認してください。

[ローカルビデオ]コンポーネントを選択し、[内容]をクリックします。[ビデオタイプ]を[オンラインビデオ]に選択し、ビデオアドレスを入力すると、該当のビデオ素材を呼び出すことができます。以下の図のように：

ビデオアドレスには相対アドレスを使用できず、https://src.fanruan.com/web/fr/video/finereportvideo.mp4のような絶対アドレスのみ使用可能です。

V3.2.0以降のバージョンでは、オンラインビデオに[ダイナミックバリューの挿入]をサポートしています。数式の入力またはデータセットのフィールドを直接バインドでき、データセットのフィールドはデフォルトで1行目のデータが選択されます。詳細は「FineVisのダイナミックバリュー」を参照してください。

注意：webページ上では、ブラウザの「開発者ツール」を使用してビデオを特定し、ビデオの元のアドレス（絶対アドレス）を取得できます。詳細な操作方法はGoogleで検索してください。

入力したビデオアドレスが間違っている場合（例：直接webページのアドレスを入力した場合）、プレビュー時にコンポーネントに以下のようなエラーメッセージが表示されます：

オンラインビデオの元のファイル形式がwebm、mp4、movおよびogg形式に該当せず、またはネットワークに問題がある場合、プレビュー時にコンポーネントに以下のようなエラーメッセージが表示されます：

ビデオ属性の設定は以下の図のように：

1.塗りつぶし方法

2種類のビデオ表示方法を選択できます：

2.色相及びその他設定

ビデオの元の効果に基づき、[色相]、[彩度]、[明るさ]及び[コントラスト]を調整できます。

3.ツールバー

1）[ビデオツールバー表示]にチェックを入れない場合、ビデオの一時停止/再生操作ができず、音量調整もできません。

2）[ビデオツールバーを表示]にチェックを入れた場合、ビデオをクリックすると一時停止/再生できます。マウスをビデオ上に移動すると、ビデオ下部に進捗バー、一時停止ボタン、音量調整ボタンが表示されます。

4.再生設定

4.1自動再生(現在ページ)

1）[自動再生(現在ページ)]にチェックを入れない場合、テンプレートをプレビューする際、コンポーネントを手動でクリックしてビデオを再生する必要があります。以下の図のように：

注意：[自動再生(現在ページ)]にチェックを入れない場合、必ず[ビデオツールバー表示]にチェックを入れてください。そうしないと、プレビュー時にビデオを手動/自動で再生できません。

2）[自動再生(現在ページ)’にチェックを入れ、かつ初期音量が0の場合、テンプレートをプレビューする際、手動クリックなしに自動的にビデオが再生されます。

注意：ビデオコンポーネントがテンプレートの最初の改ページに配置され、かつ初期音量が0でない場合、GoogleChromeの制限により、プレビュー時にコンポーネントを手動でクリックしてビデオを再生する必要があります。

ユーザがドメインとのインタラクション（クリック、タップなど）を行った場合、またはデスクトップデバイスでユーザのメディア関与指数が閾値に達した場合（例：ユーザが以前に音声付きのビデオを再生した場合）、またはモバイルデバイスでユーザがサイトをホーム画面に追加したり、デスクトップデバイスでPWA（Progressive Web App）をインストールしたりした場合、システムは音声付きの自動再生を許可します。

また、最上位のフレームは、iframeに自動再生の権限を委託することで、音声付きの自動再生を許可することもできます。

4.2ループ再生

1）[ループ再生]にチェックを入れない場合、ビデオは1回のみ再生されます。再度再生するには、コンポーネントを手動でクリックして再生する必要があります。

2）[ループ再生]にチェックを入れた場合、ビデオの再生が終了すると自動的に先頭から再開し、繰り返し再生されます。

5.初期音量

ビデオの音量調整範囲は0～100です。

1.ビデオの初回再生時カクつき問題が発生

初回のビデオプレビュー時にカクつきが発生する場合、ビデオ自体に問題がある可能性があり、最適化が必要です。

FineVisプラグインV2.1.0以降のバージョンでは、「FineVisストリーミングプラグイン」をV1.4以降のバージョンにインストールまたはアップデートし、ローカルビデオファイルを再アップロードしてください。

 · デザイナへのプラグインのインストール方法は「デザイナプラグイン管理」を参照してください。

 · サーバへのプラグインのインストール方法は「サーバプラグイン管理」を参照してください。 

2.ビデオの2回目再生時カクつき問題が発生

カスタムアップロードのビデオにサイズ制限はありませんが、ビデオリソースが大きい場合、ブラウザのキャッシュサイズが不足するため、2回目の再生時にキャッシュを利用せずにリソースを再要求することにより、カクつきなどの問題が発生する可能性があります。

明らかなカクつきを感じた場合、ビデオの圧縮またはブラウザのキャッシュ制限の変更をおすすめします。Chromeの最大キャッシュ制限を変更する方法は以下の通りです：

レジストリエディタを開き、「HKEY_LOCAL_MACHINE\SOFTWARE\Policies」の下に「Google\Chrome」を新規作成し、「DiskCacheSize」を新規項目として追加します。値を「77359400」に設定し、保存してコンピュータを再起動すると有効になります。

テンプレートをダウンロードするにはこちらをクリックしてください：

FineVisローカルビデオコンポーネントの例.fvs