Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Video

Video UIパターンを使用すると、アプリケーションにネイティブビデオプレーヤーを埋め込むことができます。

Videoは、ユーザーを引きつける強力なツールとして使用します。ただし、基本的な情報はすべてテキストとしてアプリケーションに表示するように常に留意してください。

注記: YouTubeやVimeoなどのビデオをストリーミング配信する場合は、「アプリケーションにビデオを追加する方法」の記事をご覧ください。

使用方法

Service Studioの[Interface]タブで、Videoブロックをツールボックスからアプリケーションの画面にドラッグします。[Properties]タブで、埋め込むソース動画ファイルを定義します。コントロールやサイズなどのその他のパラメータは、すべてオプションです。

  1. Videoパターンをツールボックスからプレビューにドラッグします。

  2. SourceFileの値を設定します。

    • 外部ソースファイルを使用する場合は、ファイルのURLを挿入します。

    • ローカルファイルを使用する場合は、ビデオをリソースとしてモジュールに含め、ランタイムパスを使用します。

      1. Data]タブで、Resourcesフォルダを右クリックして[Import Resource]を選択します。

      2. 動画ファイルを参照して[Open]をクリックします。

      3. Interface]タブに移動し、Videoパターンを挿入した画面を選択します。
      4. Videoパターンを選択します。
      5. Properties]タブで、[SourceFile]フィールドをクリックして、ランタイムパス「"Resources.video-file-name"」を入力します。以下の例を参照してください。

入力パラメータ

以下の表は、利用可能なすべての入力パラメータを示しています。

入力名 説明 必須 デフォルト値
SourceFile 動画ファイルのURLまたはリソース動画ファイルのランタイムパスを挿入します。 Text True none
Width 動画の幅(ピクセル単位またはパーセント単位)が追加されます。指定しない場合、元の動画の幅が検出されます。 Text False "100%"
Height 動画の高さ(ピクセル単位またはパーセント単位)が追加されます。指定しない場合、元の動画の高さが検出されます。 Text False "100%"
Autoplay Trueの場合、動画の準備ができ次第再生を開始することを示します。 Boolean False False
Loop Trueの場合、動画が終了し次第再生を再開することを示します。 Boolean False False
Muted Trueの場合、動画の音声が無効になることを示します。 Boolean False False
Controls Falseの場合、動画のコントロールを無効にします。モバイルの場合、コントールは常に有効になります。 Boolean False True
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

高度なユースケース

カスタムの再生ボタンおよび一時停止ボタンを使用する

  1. Videoパターンの名前を設定します。

  2. 画面でPlayアクションおよびPauseアクションを作成します。

  3. [Logic]タブで、OutSystems UI WebをクリックしてVideoフォルダに移動します。

  4. PlayVideoアクションおよびPauseVideoアクションを作成したPlayアクションおよびPauseアクションにドラッグします。

  5. 各サーバーアクションで、WidgetIdパラメータをVideoパターンの名前に設定します。

  6. ボタンとして動作する要素を作成します。コンテナの周囲をアイコンで囲み、OnClickをPlayアクションおよびPauseアクションに設定することもできます。

  7. パブリッシュしてテストします。

注記

Autoplayパラメータは、MutedがTrueに設定されている場合のみ機能します。

デバイスの互換性

モバイルの場合、コントールは常に有効になります。

  • Was this article helpful?