Custom integration

Brightcove modal

customModalHtmlを使い、標準形式ではない外部プレイヤーをモーダルへ組み込む開発用デモです。

Integration ready

Custom content type

brightcove:VIDEO_IDを解析し、プレイヤーマークアップと外部スクリプトをmounted時に準備します。

customModalHtml

Brightcove player

Brightcoveのサンプルアカウントと動画IDを使用します。

Fallback check

同じカスタムテンプレートで通常のtemplateも表示できます。

外部サービスのネットワーク状態や埋め込み設定によって、プレイヤーが利用できない場合があります。

Custom markup outline 
new MODAL_MODULE({
  customModalHtml(type, videoId) {
    if (type === 'brightcove') {
      return `<section id="{{ id }}" ...>
        {{ contentStart }}
        <video data-video-id="${videoId}" ...></video>
        {{ contentEnd }}
      </section>`;
    }
  }
});