ドメインの紐付け

P2Pサービスを利用する前に、まずドメインを紐付ける必要があります。

TIP

Localhostはホワイトリストに登録済みのため、紐付け不要でローカルデバッグに利用できます。

デモ

プレイヤーの例を参照してください。

プラグインの導入

scriptタグでの導入

<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/vhs"></script>

ファイルでの導入

こちらをクリック

Browserify / Webpack

npm install --save @swarmcloud/vhs

プレイヤーのモジュール内で require を使ってcdnbyeを導入：

var P2pEngineVHS = require('@swarmcloud/vhs');

またはES6の import 構文を使う場合：

import P2pEngineVHS from '@swarmcloud/vhs';

プラグインの使用

var engine;
var player = videojs('my_video', {
  html5: {
      vhs: {
          overrideNative: true          // Enable p2p if the platform supports Media Source Extensions
      },
  }
});
player.on('xhr-hooks-ready', () => {
    if (engine) {
      engine.destroy();
    }
    engine = new P2PEngineVHS(player, {
      // trackerZone: 'hk',        // if using Hongkong tracker
      // trackerZone: 'us',        // if using USA tracker
      // token: YOUR_TOKEN
    })
});
player.src(YOUR_PLAYLIST_URL)

または

var player = videojs('my_video', {
   html5: {
       vhs: {
           overrideNative: true        // Enable p2p if the platform supports Media Source Extensions
       },
   }
});
var engine = new P2PEngineVHS(player, {
      globalVhs: videojs.Vhs,
      // trackerZone: 'hk',        // if using Hongkong tracker
      // trackerZone: 'us',        // if using USA tracker
      // token: YOUR_TOKEN
    }, videojs)
player.src(YOUR_PLAYLIST_URL)

ファイルの説明

@swarmcloud/vhs/
├── vhs-p2p-engine.min.d.ts         # Typescript type information
├── vhs-p2p-engine.min.js           # P2pEngine that supports both Dash and Hls
└── vhs-p2p-engine.hls.min.js       # P2pEngine that supports Hls only
└── vhs-p2p-engine.dash.min.js      # P2pEngine that supports Dash only