スクリプト開発向けタグライブラリ

imuiVideo

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.12
バージョン8.0.12

機能説明

  • パブリックストレージ中の動画を表示、再生します。
  • 内部でvideo.jsを利用しています。
注意事項
  • 制限事項
    • HTML5 の video タグを利用します。対応しないブラウザでは動画を再生することはできません。
    • ブラウザによって、再生できるフォーマットが異なります。
      • https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats などを参考にしてください。
    • ブラウザによって、再生できるフォーマットにも関わらず再生できないファイルが存在します。
      • 事前に再生できるかどうかを確認することをお勧めします。
    • 動画をブラウザに送信する際にネットワーク帯域やAPサーバのリソースを大量に消費することが考えられます。
      • Youtubeのような動画配信サービスを提供することを想定していません。簡易的なものであることを理解した上でご利用ください。
  • 注意事項
    • ディレクトリの区切り文字には「/」（スラッシュ）を使用してください
    • Last-Modified とリクエストヘッダ中の If-Modified-Since は、秒単位（ミリ秒を切り捨て）で比較します
    • ETag は、ファイルパス、ファイルサイズ、最終更新時間（ミリ秒を含む） を元に作成されます
    • eTag 属性は lastModified 属性よりも優先されます。ファイルの ETag と If-None-Match が一致した場合、Last-Modified による比較は行われません
    • パブリックストレージのパスから URL を推測されないよう、暗号化しています
    • imuiPicture の設定と共通です。
      • 暗号化・複合化する際のアルゴリズム・パスワードを変更するには、conf/ui-tag-config/ui-tag-config_imui-picture.xml ファイルを編集してください
        • タグ名は「imuiPicture」、暗号化アルゴリズムは「algorithm」、指定した暗号化アルゴリズムに対応する暗号化キーは「key」をパラメータ名として、パラメータ値を設定してください
        • 暗号化アルゴリズムには、AES, DES 等の Java 暗号化機能がサポートするアルゴリズムを指定してください

属性一覧

注釈 属性名 型 説明 省略時の動作
authzAction string 認可アクションを指定します
各認可リソースURIに対応したアクションを指定してください
スペース区切りで複数の認可を指定することができます（authzCondition 属性を使用して、指定した認可のすべてが許可された場合のみに画像を表示するのか、どれか一つでも許可された場合に表示するのかを制御できます）
指定した認可判断の結果が「許可」以外の場合、画像は表示されずレスポンスとして 403 Forbidden が返却されます		 -
authzCondition string authzConditionは以下の2通りの指定方法があります。
  • or
    • 指定した認可のどれか一つでも許可された場合に画像が表示されます
  • and
    • 指定した認可のすべてが許可された場合のみに画像が表示されます
 or
authzUri string 認可リソースURIを指定します
authzAction 属性と組み合わせて使用してください
スペース区切りで複数の認可を指定することができます（authzCondition 属性を使用して、指定した認可のすべてが許可された場合のみに画像を表示するのか、どれか一つでも許可された場合に表示するのかを制御できます）
指定した認可判断の結果が「許可」以外の場合、画像は表示されずレスポンスとして 403 Forbidden が返却されます		 -
HTML5
Boolean属性 		autoplay boolean 自動的に動画を再生するかどうかのフラグです。 false
cacheControl string Cache-Control レスポンスヘッダに出力する値を指定します private
contentType string Content-Type レスポンスヘッダに出力する値を指定します
本属性が未指定の場合、src 属性に指定されたファイル名の拡張子（大文字小文字無視）から出力する Content-Type を決定します
拡張子と Content-Type は以下のマッピングを基に決定されます
拡張子 Content-Type
mov video/mp4
mp4 video/mp4
ogg,ogv video/ogv
webm video/webm
その他 application/octet-stream
-
HTML5
controls boolean 動画のコントローラーを表示するかどうかのフラグです。 true
Boolean属性 eTag boolean ETag レスポンスヘッダを出力するかどうかを指定します false
無害化 height string 再生領域の縦幅を指定します -
id string videoタグのidです 代替idを付与
Boolean属性 lastModified boolean Last-Modified レスポンスヘッダを出力するかどうかを指定します true
HTML5
loop boolean 繰り返し再生するかどうかのフラグです。 false
HTML5
muted boolean 消音するかどうかのフラグです。 false
name string videoタグのnameです 代替nameを付与
HTML5
poster string 動画を再生する前に表示される画像のパスを指定します。パブリックストレージ上のパスを指定してください。
この属性を指定しない場合、動画の最初の部分が読み込まれるまでは何も表示されず、読み込まれた後はその部分が画像として表示されます。		 -
HTML5
preload string ページを表示した際に動画のデータを読み込むか、読み込むのであればどのように読み込むのかを指定します。
指定する値 説明
auto ブラウザは動画全体を読み込むべきであることを示します。
metadata ブラウザは動画全体ではなく、 動画のメタデータのみを読み込むべきであることを示します。
none ブラウザは動画を読み込むべきでないことを示します。
auto
src string 表示する動画のパスを指定します -
無害化 width string 再生領域の横幅を指定します -
無害化 その他 string ユーザ定義属性です -

サンプル

src

src
指定したパブリックストレージ中の動画を表示します
中央の再生アイコンをクリックすると、動画が再生されます。
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.mov" />

autoplay

autoplay
autoplay 属性を指定すると、画面表示時に自動的に動画が再生されます。
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.mov" autoplay />

height, width

height, width
height, width 属性を指定することで動画の大きさを指定することができます。
動画のアスペクト比が保たれるように表示されます。
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.mov" height="100px" width="300px" />

poster

poster
poster 属性を指定することで、動画を再生する前の画像を指定することができます。
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.png" poster="sample/video/poster.png" />

CSJS(video.js)

CSJS(video.js)
video.jsを利用し、動画を読み込んだ際に5秒目から再生を始めます。
HTML
<imart type="imuiVideo" id="sample-video" src="sample/video/intra-mart.mov"/>
<script>
  $(function() {
    videojs('sample-video').ready(function() {
      this.currentTime(5);
      this.play();
    });
  });
</script>

authzUri, authzAction

authzUri, authzAction
authzUri, authzAction 属性を使用することで、動画に認可をかけることができます
認可結果が許可されなかった場合、動画は表示されません
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.mov" authzUri="service://ui/test/video" authzAction="execute" />

authzUri, authzAction を複数指定

authzUri, authzAction を複数指定
以下の二つの認可結果がすべて「許可」である場合に画像が表示されます
  • service://ui/test/video1, execute
  • service://ui/test/video2, display
HTML
<imart type="imuiVideo" src="sample/video/intra-mart.mov" authzUri="service://ui/test/video1 service://ui/test/video2" authzAction="execute display" authzCondition="and" />

Copyright © 2012 NTT DATA INTRAMART CORPORATION