Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

Video

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

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

Video UIパターンの使用方法

  1. Service StudioのツールボックスでVideoを検索します。

    Videoウィジェットが表示されます。

  2. ツールボックスから、Videoウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. Properties]タブで、SourceFileプロパティをアプリに埋め込むソース動画ファイルに設定します。

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

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

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

      2. 追加する動画ファイルを参照して選択し、[Open]をクリックします。

      3. Resourceの[Properties]タブで、[Deploy Action]ドロップダウンから[Deploy to Target Directory]を選択します。

      4. Interface]タブのWidget Treeで、Videoパターンを選択します。

      5. SourceFileプロパティに動画ファイルのランタイムパスを入力します。

        ヒント: ランタイムパスは、ResourceのRuntime Pathプロパティからコピーできます。

  4. Videoの[Properties]タブで、動画の高さと幅や音声設定などの(オプションの)プロパティも定義できます。

  5. これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
SourceFile(Text型): 必須 動画ファイルのURLまたはリソース動画ファイルのランタイムパス。
Width(Text型):オプション 動画の幅(ピクセル単位またはパーセント単位)。



  • 空白 - ビデオの幅が100%になります。これがデフォルト値です。
  • 150 - ビデオの幅が150pxになります。
Height(Text型):オプション 動画の高さ(ピクセル単位またはパーセント単位)。



  • 空白 - ビデオの高さが100%になります。これがデフォルト値です。
  • 150 - ビデオの高さが150pxになります。
Autoplay(Boolean型): オプション Trueの場合、ページが描画されるとすぐに動画の再生が始まります。Falseの場合、動画再生コントロールがクリックされるまで動画は再生されません。これがデフォルトです。
Loop(Boolean型): オプション Trueの場合、再生が終了するともう一度動画が再生されます。Falseの場合、再生は繰り返されません。これがデフォルトです。
Muted(Boolean型): オプション Trueの場合、動画の音声が無効になります。Falseの場合、動画の音声が有効になります。これがデフォルトです。
Controls(Boolean型): オプション Falseの場合、動画コントロールが無効になります。Trueの場合、動画コントロールが有効になります。これがデフォルトです。
注記 モバイルアプリの場合、コントロールは常に有効になります。
ExtendedClass Video UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるVideo UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるVideo UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

注記

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

デバイスの互換性

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

  • Was this article helpful?