再生ソース
- 印刷する
- PDF
再生ソース
- 印刷する
- PDF
記事の要約
この要約は役に立ちましたか?
ご意見ありがとうございます
Classic/VPC環境で利用できます。
再生ソースではスクリプトコードを作成してプレイヤーを適用する方法と、1つのプレイヤーで複数の動画を再生する方法について説明します。
参考
オプションを設定するプロパティに関する説明は、プレイヤー設定をご参照ください。
基本設定
簡単なスクリプトコードで次のようにコントロールバーボタン UIが表示されるプレイヤーを適用できます。
参考
再生ソースは、mp4、hls、dash形式に対応しています。
ユースケースは次の通りです。
// 動画(MP4)
new ncplayer('video4', {
playlist: 'https://CDNドメイン/example_video_01.mp4',
});
複数の動画を再生
playlist
プロパティで複数の再生ソースを送信することで、複数の動画を連続で再生できます。また、複数の動画再生機能をオーバーライド(Override)でき、次に再生する映像を動的プレイリストで構成できます。
基本機能
複数の動画を連続で再生する基本機能を実装できます。
参考
autostart
プロパティが falseの場合は、次の動画が自動で再生されず、「次」ボタンと「前」ボタンが表示されます。autostart
プロパティに関するユースケースは、自動再生をご参照ください。
ユースケースは次の通りです。
// 動画(MP4)
new ncplayer('video1', {
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
poster: 'https://CDNドメイン/example_image_01.png'
},
{
file: 'https://CDNドメイン/example_video_02.mp4',
poster: 'https://CDNドメイン/example_image_02.png'
},
{
file: 'https://CDNドメイン/example_video_03.mp4/index.m3u8',
poster: 'https://CDNドメイン/example_image_03.png'
}
],
});
機能オーバーライド(Override)
複数の動画を連続で再生できる playlist
プロパティに nextSource
、prevSource
プロパティを Overrideして希望する機能を実装できます。ユースケースは次の通りです。
// 動画(MP4)
const player = new ncplayer('video', {
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
poster: 'https://CDNドメイン/example_image_01.png',
}
],
override:{
nextSource(){
// 顧客会社の次の動画機能を実装
// location.href='next url'
},
prevSource(){
// 顧客会社の前の動画機能を実装
// location.href='prev url'
}
}
});
動的プレイリストの構成
動画再生が完了した後、次に再生する動画を動的に追加できる機能を提供します。例えば、次のようにおすすめ動画をサムネイルと一緒にご案内するように構成できます。
ユースケースは次の通りです。
// 動画(MP4)
const player = new ncplayer('video', {
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
poster: 'https://CDNドメイン/example_image_01.png',
}
]
});
// 次の動画を追加
player.addNextSource({
file: 'https://CDNドメイン/example_video_022.mp4',
poster : 'https://CDNドメイン/example_image_022.png',
})
// 次の動画を追加
player.addNextSource({
file: 'https://CDNドメイン/example_video_033.mp4',
poster : 'https://CDNドメイン/example_image_033.png',
})
// 前の動画を追加
player.addPrevSource({
file: 'https://CDNドメイン/example_video_00.mp4',
poster : 'https://CDNドメイン/example_image_00.png',
})
この記事は役に立ちましたか?