SundaySkyは、主なデスクトップおよびモバイルのブラウザへのビデオストリーミング用に設計されたHTML5プレイヤーを提供します。 The player is responsive with default dimensions of 640 x 360 pixels. You can use CSS properties to overwrite these dimensions.
ここではSundaySkyプレイヤーをWeb ページに埋め込む方法について説明します。
注意事項:
この記事で説明されている以外の方法で、プレーヤーのプロパティを変更しないでください。以下のガイドラインに記載されていない特別な要件がある場合は、SundaySkyプロジェクトマネージャにご連絡ください。
Adding the Player Script Code
|
Step 1: Webページで再生したいビデオのビデオIDを取得します。
|
| 1. |
あなたのビデオで、該当するビデオを探します。
|
| 2. |
ビデオのサムネイルをクリックします。
|
| |
|
| 3. |
動画が少なくとも1つのチャンネルに 公開 されていることを確認してください。
|
| 4. |
URLの末尾にある文字列をコピーし、準備しておきます。 これが step 3で必要となるビデオIDです。
▶ アカウント内の各ビデオには、固有のビデオIDが設定されています。
|
| |
|
|
Step 2: プレーヤーコードをコピーして配置します。
|
| 1. |
Copy the code below.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video ID>'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
2. |
Web ページで、プレーヤーを表示したい場所に div 要素 (sskydiv) を配置します。createPlayer()関数を呼び出す前に、このdiv（下図の緑色で表示）をページに読み込ませる必要があります。
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video ID>'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
|
Step 3: コードをカスタマイズする。
|
| 1. |
コードの中で、 <Video ID> を探します（下図の青色で表示）。
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video ID>'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
2. |
文字列全体を、 step 1取得したビデオ ID に置き換えます。 このとき、元のコードに表示されている < > も削除してください。
▶ この文字列を実際の値に置き換えた場合の例を以下に示します。
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = 'fe191575-8b68-4dcc-9c3d-a9cfe496fa2f'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
3.a. |
(オプション) 視聴者が再生ボタンをクリックするまで 表示されるプレーヤーの背景画像を設定します。
|
クリックすると、デフォルトで表示される画像を見ることができます。
| 3.b. |
コードの中で、 https://player.sundaysky.com/poster.png （以下、青字で表示）を探します。
▶これはデフォルト画像のURLです。
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video ID>'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
3.c. |
文字列全体を、作成したカスタムイメージのURLに置き換えます。
▶ 以下は、この文字列を新しい値に置き換えた後の例です。
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video ID>'; //
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+window.location.search);
sskyplayer.setAttribute('poster', 'https://a7bab7fd-1769-475e-939e-15f94591d498.images.sundaysky.com/poster/image.jpg?format=jpg');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>
|
ウェブ解析とビデオイベントの統合
動画プレーヤは、動画やプレーヤ内でのさまざまなイベント、および視聴者が動画とやりとりしている間にイベントを発行します。イベント リスナーは、定義した任意の JavaScript コードをトリガするために使用することができます。イベントの完全なリスト、イベントによって公開されるデータ、およびコード例については、 プレイヤー・イベントと外部システムとの連携を参照してください。
