Classic/VPC環境で利用できます。
コンテンツ認証ではスクリプトコードを変更して再生ソースに Secure Tokenを適用する方法と、MultiDRMを設定する方法を説明します。
注意
現在の機能は実機のみで動作します。シミュレータでは動作しません。
参考
Android、iOSで共通して適用されます。
Secure Token
tokenプロパティで再生ソースに Secure Tokenを適用して OneTimeUrlをサポートします。
player.tokenChangeプロパティで動画の再生中に中断なしに Secure Tokenを交換できます。
Secure Tokenに関する詳細は、Global Edgeご利用ガイドをご参照ください。
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //再生ソース
{
file: 'https://CDNドメイン/example_video_01.mp4'
},
],
token: 'token=st=1675320871~exp=1675320901~acl=....', // Secure Token
}}
...
/>
)
//トークンアップデート
playerRef.current.tokenChange('token=st=1675320871~exp=1675320901~acl=....') //再生中に新規トークンに交換
MultiDRM
playlist.drmプロパティで MultiDRMを設定します。ユースケースは次の通りです。
注意
このユースケースは、Doverunner (PallyCon) DRMのユースケースです。
FairPlay
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //再生ソース
{
file: 'https://CDNドメイン/example_video_01.m3u8',
drm: {
type: 'fairplay',
licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
certificateUrl: '{Certificate URL}',
base64Certificate: true,
getLicense: async (spc) => {
const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
method: 'POST',
headers: {
'pallycon-customdata-v2':'{FairPlay用 Token}'
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
Widevine
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //再生ソース
{
file: 'https://CDNドメイン/example_video_01.mpd',
drm: {
type: 'widevine',
licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
getLicense: async (spc) => {
const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
method: 'POST',
headers: {
'Content-type': 'application/x-www-form-urlencoded',
'pallycon-customdata-v2':'{Widevine用 Token}'
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
One Click Multi DRM
Video Player Enhancementサービスと One Click Multi DRMサービスを連携して DRMを適用できます。
FPS Certificateとライセンス発行をリクエストするための Endpoint(エンドポイント)とリクエストヘッダを確認します。
FPS Certificateのリクエスト(Apple FairPlay専用)
ライセンス発行のリクエスト(FairPlay、Widevine、PlayReady共用)
FairPlay
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.m3u8',
drm: {
type: 'fairplay',
licenseServer: '{License URL}',
certificateUrl: '{Certificate URL}',
certificateRequestHeader: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"accept": "application/json"
},
base64Certificate: true,
getLicense: async (spc) => {
const res = await fetch('{License URL}', {
method: 'POST',
headers: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"x-drm-token": "{One Click Multi DRM FPS TOKEN}"
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
Widevine
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.m3u8',
drm: {
type: 'widevine',
licenseServer: '{License URL}',
getLicense: async (spc) => {
const res = await fetch('{License URL}', {
method: 'POST',
headers: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"x-drm-token": "{One Click Multi DRM FPS TOKEN}"
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)