カスタムプレーヤー:URLパラメータとUstream 埋め込みAPIを使用する

スタンダードUstream埋め込み機能は、コーディングの必要はなく、コピー/ペーストするだけで素早く簡単にUstreamプレーヤーを他のサイトに埋め込むことができるようデザインされています。スタンダードの埋め込み機能の詳細:「配信/動画をウェブサイトに埋め込む

ここでは高度な埋め込み機能とUstreamプレーヤーのカスタマイズをご紹介します。

UstreamプレーヤーでURLパラメータを使用

URLパラメータを使用することによって、埋め込みプレーヤーのデフォルト動作を無視することができます。

例として「autoplay=true」のコードと共にプレーヤーを埋め込むと、ページにプレーヤーがローディングされると自動的に再生されます。または「volume=0」のコードを使うとプレーヤーは常にミュート状態で開始されます。

以下は通常の埋め込みコードです:

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

次のコードには自動再生のパラメータが追加されています。

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1&autoplay=true" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

「&」をそれぞれのパラメータの間に追加すると複数のURLパラメータを同じ行で使用することができます。例:

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1&volume=0&autoplay=true" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

弊社の新しいプレーヤーに反映させるため既存のHTMLコードを変更する場合は、これらのパラメータを使用することができます。

  • プレーヤーの高さから32pxを引いたサイズに変更、「&」パラメータと埋め込みソースのURLからのパラメータ(存在する場合)を追加します。
  • 前のプレーヤーに戻します: html5ui パラメータを取り除きます。

以下のURLパラメータはUstreamプレーヤーで使用することができます:

パラメータ 説明 デフォルト値 詳細
autoplay iframeがローディングされると同時にビデオが自動的に再生されます false html5自動再生はiOSではサポートされていません
html5ui 新しいプレーヤーUIを有効化する 1
controls プレーヤークロームのディスプレイ(「ボトムバー」「コントロールバー」) true falseの場合すべてのコントロールUIが非表示になり、そのためビュアーコントロールがUstream埋め込みAPIからのみ可能
volume プレーヤーのローディング時の初期の音量 0 可能なバリュー:0-100の間の%
showtitle デフォルト設定では、チャンネルやビデオタイトルはプレーヤーの左下角に表示されますが、このパラメータを使用するとタイトルを非表示にすることができます。 true  
wmode Flash wmodeパラメータの無効化 opaque 利用できるパラメータ:direct (直接), opaque (不透明), transparent (透明), window (ウィンドウ) パラメータはHTML5プレーヤーには適用しません
quality デフォルト配信クオリティを設定 best 利用できるパラメータ:low (低)、med または medium (中)、high (高)、best または hd (ベストまたはHD) パラメータはFlashプレーヤーにのみ適用します。HTML5プレーヤーは適応し、配信クオリティは自動的に選択されます。

Ustream Javascript埋め込みプレーヤーAPIを使ってUstreamプレーヤーをコントロール

Ustream Javascript埋め込みプレーヤーAPIを使用すると、ウェブサイトに埋め込まれたプレーヤーのアクションをコントロールすることができ、またウェブページの他の要素を制御するために、プレーヤーで発生したイベントに注目することができます。これは以下のどのアプリケーションでも使用することができます。

  • プレーヤのライブ配信と録画ビデオのコンテンツを交互に入れ替える
  • ユーザーがウェブサイト(またはモバイル内)上で行ったアクションが元のプレーヤーの状態を変更。例として、ユーザーがページ上で他のメディアで対話した時、ライブ配信を自動的に一時停止やミュートモードにすることができます。
  • プレーヤー上のイベントに注目することができます。例えば、録画ビデオの終了時が確認できればビデオコンテンツに基づいてページの状態を変えることができます。
  • 現在のプレーヤーステータスを調査。例えば、同時視聴者数や視聴数に基づいて発生したプログラムのアクションをページ内の違う場所に表示します。
  • 独自のカスタム・インタフェースを開発し、デフォルトプレーヤーのコントロールを交換するためのプレーヤーを検索。(chrome)

Ustream Javascript 埋め込みプレーヤーのAPIの詳細は、以下のサイトを参照してください。https://github.com/ustream/embedapi

カスタムプレーヤーの制作

    • URLパラメータ「controls=false」でプレーヤーを埋め込む
<iframe src="http://www.ustream.tv/embed/1524?v=3&amp;wmode=direct&amp;autoplay=true&controls=false" style="border: 0px none transparent;" width="480" height="302" frameborder="0"></iframe>
  • プレーヤーのためのコントロールをデザイン
  • プレーヤー制御の正しいアクションコントロールをリンクするため、Ustream Javascript 埋め込みプレーヤー APIを使用します。
Powered by Zendesk