ビデオプレーヤーウィジェット (テーマ指定可能)
ビデオプレーヤーウィジェット (テーマ指定可能) を使用すると、マッシュアップにビデオを埋め込んで再生できます。ビデオプレーヤーは、自動再生、サムネイルイメージの追加、コントロールの外観の制御など、複数のオプションをサポートしています。これは、一貫したユーザーエクスペリエンスを実現するためのテーマ指定をサポートするレスポンシブウィジェットです。
 |
ビデオプレーヤーは、ThingWorx Web Component SDK でカスタマイズしてからインポートし、ウィジェットとして、および Web コンポーネントとして使用できます。
|
構造
1. ビデオプレーヤーのラベル
2. 動画領域
3. プレビューサムネイル
4. プレーヤーコントロール
キーボードショートカット
次の表は、このウィジェットの操作に使用できるキーボードショートカットを、コンポーネント別に示しています。
|
コンポーネント
|
ボタン/コントロール
|
キー
|
説明
|
|---|---|---|---|
|
ナビゲーション
|
ウィジェット上の異なるコンポーネント間のナビゲーションを制御します。
|
Tab および Shift + Tab
|
プレーヤーのサブコンポーネント間を前後に移動します。
|
|
プレーヤー
|
再生/停止の制御
|
スペースまたは Enter
|
動画を再生または停止します。
|
|
タイムラインバー
|
上矢印または右矢印
|
10 秒早送りします。
|
|
|
下矢印または左矢印
|
10 秒巻き戻します。
|
||
|
Page Up
|
1 分早送りします。
|
||
|
Page Down
|
1 分巻き戻します。
|
||
|
Home
|
動画の先頭に移動します。
|
||
|
End
|
動画の最後に移動します。
|
||
|
オーディオ
|
ミュートボタン
|
スペースまたは Enter
|
動画をミュートまたはミュート解除します。
|
|
音量スライダー
|
上矢印または右矢印
|
音量を 5% 上げます。
|
|
|
下矢印または左矢印
|
音量を 5% 下げます。
|
||
|
Home
|
音量を 0% に設定します。
|
||
|
End
|
音量を 100% に設定します。
|
||
|
ダウンロード
|
ダウンロードボタン
|
スペースまたは Enter
|
動画ファイルをダウンロードします。
|
|
フルスクリーン
|
フルスクリーンボタン
|
スペースまたは Enter
|
フルスクリーンにします。
|
|
Esc
|
フルスクリーンを終了し、ウィンドウモードに戻ります。
|
プレーヤーコントロールのレイアウトの設定
ビデオプレーヤーコントロールの位置を設定するには、OverlayControls プロパティを使用します。このプロパティが true に設定されている場合、コントロールは動画コンテンツ上に表示されます。false に設定すると、コントロールは動画の下に表示されます。コントロールをオーバーレイすると、ウィジェットが使用する垂直方向のスペースが減ります。
サムネイルの追加
動画が始まる前にプレビューイメージを表示するには、Thumbnail プロパティを使用します。ユーザーが再生ボタンを選択するまで、動画の代わりにイメージが表示されます。この機能は、コンテキスト、ブランディング、またはコンテンツのプレビューを提供するのに役立ちます。プレイバックが始まると、サムネイルが動画に置き換えられます。
プレイバックの設定
AutoPlay プロパティを有効にすることで、マッシュアップがロードされたときに動画のプレイバックを自動的に開始できます。AutoPlay を有効にすると、動画はデフォルトでミュートされます。オーディオを有効にするには、ユーザーは動画のプレイバックが開始された後に手動でミュート解除する必要があります。オーディオを設定するには、ウィジェットの Mute プロパティを有効または無効にするか、オーディオを動的に制御するバインドを作成します。
ダウンロードボタンの追加
プレーヤーにダウンロードボタンを表示するには、EnableDownload プロパティを使用します。有効にすると、ユーザーはこのボタンを使用して、指定された URL から動画をダウンロードできます。オフライン表示をサポートしたり、動画コンテンツを共有したりするには、この機能を使用します。
|
|
CSP 規則などのセキュリティ設定が原因でダウンロードがブロックされた場合は、メッセージが表示されます。
|
CSP 規則の設定
ThingWorx 環境でコンテンツセキュリティポリシー (CSP) ルールが有効になっている場合にビデオプレーヤーウィジェットを正しく機能させるには、動画のロード元の外部ドメインが含まれるように media-src ディレクティブを更新する必要があります。次に例を示します。
media-src 'self' https://cdn.com https://video-location.com;
CSP 規則の設定の詳細については、コンテンツセキュリティポリシーを参照してください。
ウィジェットのプロパティ
以下のテーブルにウィジェットのプロパティを示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
|---|---|---|---|---|---|
|
Label
|
ウィジェットラベルのテキストを指定します。
|
STRING
|
Y
|
Y
|
|
|
LabelAlignment
|
ラベルテキストをウィジェットの左、右、または中央に整列します。
|
STRING
|
left
|
N
|
N
|
|
VideoURL
|
再生する動画の URL を指定します。
|
NUMBER
|
なし
|
Y
|
N
|
|
EnableDownload
|
プレーヤーコントロールに、ユーザーが動画をダウンロードできるダウンロードボタンを追加します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
Thumbnail
|
動画のサムネイルイメージを指定します。
|
NUMBER
|
なし
|
Y
|
N
|
|
AutoPlay
|
ウィジェットのロード時に動画を自動的に再生するかどうかを指定します。AutoPlay を有効にすると、動画はミュートで再生されます。
|
BOOLEAN
|
False
|
N
|
N
|
|
Mute
|
動画をミュートします。
|
BOOLEAN
|
False
|
Y
|
N
|
|
OverlayControls
|
動画にプレーヤーコントロールをオーバーレイし、レイアウトでプレーヤーが使用するスペースを減らします。コントロールは、動画にカーソルを合わせたときにのみ表示されます。無効にすると、プレーヤーコントロールは常に表示されます。
|
BOOLEAN
|
False
|
Y
|
N
|
|
Width
|
ビデオプレーヤーの幅を指定します。
|
NUMBER
|
480
|
Y
|
N
|
|
Height
|
ビデオプレーヤーの高さを指定します。
|
NUMBER
|
314
|
Y
|
N
|
|
CustomClass
|
ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。スペースで区切って、複数のクラスを入力できます。
|
NUMBER
|
なし
|
Y
|
N
|
|
TabSequence
|
ウィジェットのタブの順序を指定します。
|
NUMBER
|
0
|
N
|
N
|
検証プロパティ
次の表に、ウィジェットの検証プロパティを示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
|---|---|---|---|---|---|
|
PlaybackErrorMessage
|
CSP 規則が原因で動画ファイルがブロックされた場合に表示されるメッセージ。
|
STRING
|
トークン: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]]
値: プレイバックエラー
|
Y
|
Y
|
|
PlaybackErrorMessageDetails
|
CSP 規則が原因で動画ファイルがブロックされたときにメッセージの下に表示される詳細。
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]]
動画のフォーマットがサポートされ、ネットワーク接続が機能していることを確認してから、再試行してください。
|
Y
|
Y
|
|
NetworkErrorMessage
|
ネットワークエラーが原因で動画がロードされない場合に表示されるメッセージ。
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessage]]
ネットワークの問題
|
Y
|
Y
|
|
NetworkErrorMessageDetails
|
ネットワークエラーが原因で動画がロードされない場合にメッセージの下に表示される詳細。
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]]
ネットワーク接続を確認して、再試行してください。
|
Y
|
Y
|
|
DownloadBlockedMessage
|
アクセス許可の問題で動画をダウンロードできない場合に表示されるメッセージ。
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]]
ダウンロードがブロックされました
|
Y
|
Y
|
|
DownloadBlockedMessageDetails
|
アクセス許可の問題によって動画がダウンロードできない場合にメッセージの下に表示される詳細。
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]]
ダウンロードはプラットフォームによってブロックされています。プラットフォーム CSP の規則が正しく設定されていることを確認して、再試行してください。
|
Y
|
Y
|
|
PlaybackBlockedMessage
|
CSP 規則が原因で動画ファイルがブロックされた場合に表示されるメッセージ。
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]]
このコンテンツはブロックされています
|
Y
|
Y
|
|
PlaybackBlockedMessageDetails
|
CSP 規則が原因で動画ファイルがブロックされたときにメッセージの下に表示される詳細。
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]]
この問題を解決するには、サイトの所有者に問い合わせてください。
|
Y
|
Y
|
|
ValidationFailureIcon
|
検証に失敗したときに表示するアイコンを指定します。
|
STRING
|
cds:icon_error
|
N
|
N
|