配信/動画をウェブサイトに埋め込む

全てのユーストリームアカウントで番組のプレイヤー、録画ビデオ、ハイライト、またはチャットやソーシャルストリームを含むプレイヤーサイドバーをご自分のサイトやブログに埋め込むことができます。ユーストリーム有料アカウントでは、その他の特徴もご提供しております。この記事では、どこでまたどのように埋め込み機能を使用できるかを説明していきます。

ユーストリームプレイヤーから埋め込みコードを取得

配信、録画ビデオの埋め込みコードの一番シンプルな取得方法は、ビデオプレーヤーの右下「埋め込み」をクリックします。より高度なオプションは、こちらからユーストリームダッシュボード埋め込みページ

右下角の「共有」をクリックします。

ビデオプレーヤーの下の埋め込みコードをコピー/ペースト(貼り付け)します。

ユーストリームダッシュボード埋め込みページ

ユーストリームアカウントにログイン。またはまだない方はアカウントを作ります。

スクリーン右上のユーザーアイコンをクリック。出てきたメニュからダッシュボードを選びクリック。

チャンネル設定から埋め込みコード設定をクリック。

そこから埋め込みのオプションが見られます。

埋め込みコード設定のページにアクセスしたら、プレイヤーのみサイドバープレイヤー+サイドバーのいずれかを選び右横の埋め込みの作成をクリック。

左下の埋め込みコードからコードをコピーし、そのコードをビデオプレイヤーを埋め込みたいサイトのHTMLに貼付けます。

 埋め込みコードは、ビデオの右下角の「共有」>「埋め込み」からも取得できます。

サイドバーの埋め込み

フリーアカウントからもチャットやソーシャルストリームのサイドバーを埋め込むことができますが、アドフリーアカウント(フリートライアルを含む)では加えてビデオギャラリー、ウィジェット、ソーシャルストリーム/チャットの全機能を含むサイドバーがご利用いただけます。埋め込みのオプションを変えることによって、埋め込み後のプレビューが確認できます。コードは、選択したオプションを反映するために更新されます。

埋め込み用の正しいサイズを選ぶ

用途にあった正しいサイズを選ぶ際、ユーストリーム埋め込みジェネレーターツールを使用することをお勧めします。プレーヤーやサイドバーの埋め込みにはいろいろなサイズがありますが、埋め込み後の見た目をよりよくするのに最善なサイズがあります。ダッシュボード埋め込みジェネレーターツールは、希望する高さや幅を入力するとそれに合わせた寸法を計算します。

埋め込み用の正しいサイズを選ぶ

ユーストリームプレーヤーはビデオを伸縮させたり歪めたりしません。ビデオはいつもアスペクト比で表示されます。このアスペクト比は大概16:9アスペクトです。オリジナルビデオのアスペクト比を維持しながら、埋め込み寸法内での最大サイズにスケールアップ/ダウンします。非標準アスペクト比のプレーヤーの場合、オリジナルの形式を変えないようにビデオの周りが黒いセクションで覆われます。ユーストリームサイズツールを使用すると完璧な16:9アスペクに計算されます。このツールでは16:9アスペクト以外のサイズに計算することはできませんが、16:9からだと簡単にご自分で計算できます。

640 x 360は16:9アスペクト比です。ユーストリーム埋め込みツールに幅640と入力すると、自動的に高さは360に計算されます。

2つのプレーヤーサンプルを比べてみましょう。最初のサンプルは640 x 360のビデオを埋め込みしたものです。下のイメージはその埋め込みのキャプチャです。ビデオがプレーヤーのサイズと合っています。

640 x 360 埋め込み

もし異なった寸法(例えば、640pxではなく750px幅) の同じプレーヤーを埋め込んだ場合、下のイメージのように左右に黒いスペースができます。

750 x 360 埋め込み

応答プレイヤーの埋め込み

応答プレイヤーの製作ステップ:
  • 以上の項目の説明通り埋め込みコードを取得し、コードを埋め込み先のHTMLページに貼り付けます。
  • iframeのタグの幅と高さを100%に設定します。
  • iframeタグのCSSポジションを'absolute'に設定し、CSSのパラメーター「left」と「top」を0に設定します。
  • 以下のサンプルコードのように、iframeタグの付近に「div container」を加えます。「padding-bottom」のパラメーターの値は、コンテンツのアスペクト比より計算されます。(例:9/16 = 0.5625)

自動再生とミュートモードの設定

埋め込み構成インターフェースは、 Ustreamのプロブロードキャスター用に追加オプションを提供しています。ページがローディングされたら、プレイヤーを自動再生に設定することができます。その他、プレイヤーをデフォルトとしてミュートモードに設定することもできます。これらのオプションは訪問者を音でびっくりさせることなくサイト上でプレイヤーを自動再生させるのに有用です。埋め込み構成スクリーンのチェックボックスを使用し、これらのセッティングを切り替えると、テキストボックスのコードはそれに応じてアップデートされます。

埋め込みコードの非表示と埋め込み先制限の設定

UstreamプロブロードキャスターではUstreamチャンネルページを非表示にし、埋め込みコードをプレイヤーから削除することができます(その設定により視聴者はプレイヤーをどこか他のサイトに埋め込むことができません)また、埋め込み先の制限ができます。この3つのオプションを使用することにより、配信または過去の動画を指定した場所のみに埋め込みの完全な制御ができます。

埋め込み先のURLの制限設定

この設定は配信または過去の動画を指定したドメインやサイトにのみに埋め込むためのものです。

このオプションは、チャンネル設定>セキュリティにあります。このページの、プレイヤーの埋め込み制限をクリックします。

Ustream.tv上でチャンネルを非表示にする

プレイヤーを他のサイトのみで視聴可能にし、Ustream のチャンネルページからは視聴できないようにする設定は、チャンネル設定>セキュリティにあります。

プレイヤーから埋め込みコードを削除

埋め込みコード設定からではなく、チャンネル設定>ソーシャル設定にプレーヤーからの共有メニューを削除するための追加オプションがあります。この設定により他のユーザーの埋め込みコードの取得を防ぎまた、Facebook や TwitterへのUstreamチャンネルの共有を制限することができます。

 

Ustream プレイヤー埋め込みトラブルシューティング

ほとんどの場合、埋め込みは他のサイトにコードをコピー/張りつけするだけの簡単な作業で、自動的に設定できるのできます。ですが、もし問題が発生した場合、以下の一般的な問題解決法をご参考ください。

Q:コードをどこに貼付けるのか分からない。

A: もし代理でどなたかがサイトをアップデートしているのなら、コードをコピー/貼付けして代理の方に送りましょう。必ず分かるはずです。もしWordpressをお使いなら、Wordpressを使ったUstreamプレイヤーの張りつけ方法(英語) をご参照ください。Wordpressをお使いではなく、他のブログやコンテンツ管理プラットフォームをお使いの場合、HTMLモード(rich text / WYSIWYG編集ではなく)で編集していることを確認し、そこにコードを貼付けそのサイトのページをアップして下さい。

Q: プレイヤーが表示されない。プレイヤーの表示されるべき場所がただのブランクである。

A: 一部のサイトはhttp やhttpsからのプレイヤーのローディングに敏感です。 http:// や https://を貼付けコードのwwwの前に付け加えてください。

Q: プレイヤーを埋め込んだはずなのに配信が視聴できない。

A: ライブのウェブページでプレイヤーをホストする必要があります。ローカルの開発環境でページを変換し、ローカルハードドライブから読み込まれたページをプレビューしている場合、プレイヤーが配信を呼び込むことができ泣き可能性が高くなります。配信の視聴にまだ問題がある際は、配信トラブルシューティングをご参照ください。

Powered by Zendesk