接入 video.js(vhs)

  <video id="my_video_2" class="video-js" controls preload="auto" width="640" height="268">
    <source src="https://test-streams.mux.dev/x36xhzz/url_0/193039199_mp4_h264_aac_hd_7.m3u8">
  </video>
  <button onclick="startP2P">创建p2p sdk</button>
  <button onclick="destroyP2P">销毁p2p sdk</button>

    var videoId = 'my_video_2';
    var player = videojs(videoId, {}, function () {
      startP2P(player);
    });

    function startP2P(player) {
      // 获取videojs内置的vhs插件
      var vhs = window.player.tech().vhs;
      if (vhs && HLSP2P.isSupported() && !window.hlsp2p) {
        // 创建sdk实例
        const hlsp2p = HLSP2P.createCommon({
          videoId: videoId + '_html5_api', // 特别注意是<video>的id, 对于videojs来说, 传入的id拼接 _html5_api
          videoType: 'VOD', // 根据实际情况填写, 见API
          url: '这里要替换为实际的m3u8 url',
          domain: '这里要根据邮件填写',
          xp2pAppId: '这里要根据邮件填写',
          xp2pAppKey: '这里需要根据邮件填写',
          cloudAppId: 需要替换为您在腾讯云的AppId
        });
        window.hlsp2p = hlsp2p;

        // 监听SDK播放失败事件
        hlsp2p.on(HLSP2P.Events.Rollback, () => {
          // 需销毁sdk
          hlsp2p.destroy();
        });

        // 将vhs绑定到p2p sdk, 从此vhs的下载的ts都会经由p2p sdk
        const result = hlsp2p.attachVhsPlayer(vhs);
        if (result) {
          console.log('vhs绑定p2p sdk成功');
        } else {
          console.log('vhs绑定p2p sdk失败');
        }
      }
    }

    // 注意,
    // 1. 当关闭播放器的时候, 需要同步关闭P2P sdk!
    // 2. 当更换视频的时候, 需要销毁sdk并重新初始化sdk
    function destroyP2P() {
      if (window.hlsp2p) {
        window.hlsp2p.destroy();
        window.hlsp2p = null;
      }
    }

    /**
     * 关闭播放器同步关闭P2P sdk!
     */
    function closePlayer() {
      player.dispose();
      destroyP2P();
    }