再生ソース

Classic/VPC環境で利用できます。

再生ソースではスクリプトコードを作成してプレイヤーを適用する方法と、1つのプレイヤーで複数の動画を再生する方法について説明します。

基本設定

簡単なスクリプトコードで次のようにコントロールバーボタン UIが表示されるプレイヤーを適用できます。

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video4', {
  playlist: 'https://CDNドメイン/example_video_01.mp4',
});

複数の動画を再生

playlist プロパティで複数の再生ソースを送信することで、複数の動画を連続で再生できます。また、複数の動画再生機能をオーバーライド(Override)でき、次に再生する映像を動的プレイリストで構成できます。

基本機能

複数の動画を連続で再生する基本機能を実装できます。

ユースケースは次の通りです。

// 動画(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',
})