VePlayer 通过 HTML5 的 <video/> 标签实现视频播放，能满足视频播放的常用功能需求。本文为您介绍如何实现 VePlayer 提供的基础功能。

接口调用

VePlayer 的基础功能由播放器内核的属性或接口实现。
获取播放器内核的示例代码如下所示。

const playerSdk = new VePlayer({
   id: 'video',
   width: 800,
   height: 500,
   url: 'xx.mp4'
 });

 playerSdk.on('complete', () => {
   // 获取播放器内核
  const player = playerSdk.player;
  console.log('player core', player);
 })

• 获取播放器内核的属性，以获取当前播放时间为例，代码示例如下所示。

  const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    url: 'xx.mp4'
  });
  
  // ...
  // 获取当前的播放时间
  const currentTime = playerSdk.player.currentTime;
  

• 调用播放器内核的方法，以调用播放方法为例，代码示例如下所示。

  const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    url: 'xx.mp4'
  });
  
  // ...
  // 手动调用播放
  const btn = document.getElementById('play_btn');
  btn.addEventListener('click', (e) => {
    playerSdk.player.play();
  })
  

Vid 模式播放

如果您购买并接入了火山引擎视频点播服务，可使用 Vid 模式播放视频。本节为您介绍实现视频 Vid+PlayAuthToken 播放的操作步骤。

获取临时播放 Token

您需要在应用服务端通过 Vid 生成播放使用的临时播放 Token。临时播放 Token 除了包含视频 ID 等信息，还可以通过参数指定视频分辨率、转码类型、封装格式等信息。具体介绍请见通过临时播放 Token 播放。

配置参数

在实例化 VePlayer 时，设置 getVideoByToken 参数传入 Vid 播放配置。详细的参数说明请见 IPlayAuthTokenConfig。示例代码如下：

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  getVideoByToken: {
    playAuthToken: '临时playAuthToken', // 需要从服务端临时获取
    definitionMap: {
      'original': {
        definition: 'ori',
        definitionTextKey: 'ORI'
      },
      '360p': {
        definition: 'ld',
        definitionTextKey: 'LD'
      },
      '480p': {
        definition: 'sd',
        definitionTextKey: 'SD'
      },
      '720p': {
        definition: 'hd',
        definitionTextKey: 'HD'
      }
    }
  },
  languages: {
    'zh': {
      ORI: '原画',
      LD: '流畅',
      SD: '标清',
      HD: '高清'
    }
  }
});

VePlayer 会从视频点播服务自行获取视频播放地址，默认以符合条件的第一个地址作为播放地址，并会自动设置清晰度列表。
如果您需要自行处理视频信息，可以在播放器实例化之前，调用 VePlayer 提供的 Service 方法，获取视频播放地址。实现的代码示例如下所示。

const Service = window.VePlayer.Service;

const playAuthToken = '临时playAuthToken'; // 需要从服务端临时获取
Service.url(playAuthToken, '//vod.volcengineapi.com').then((res) => {
  // 业务侧处理视频信息
  const player = new VePlayer({
    id: 'mse',
    width: 800,
    height: 500,
    url: res.PlayInfoList[0].MainPlayUrl,
  });
}).catch((e) => {
  console.log(e);
});

切换视频

如果需要切换视频源，可以传入新的 playAuthToken 进行切换，示例代码如下所示。

playerSdk.switchAuthToken({
    playAuthToken: 'new playAuthToken'
});

自动更新 PlayAuthToken

PlayAuthToken 具有一定的有效时间，建议在需要播放时获取使用。如果 PlayAuthToken 过期，视频将无法起播。VePlayer 提供 onTokenExpired 事件，可以在 token 过期时自动更新 token ，代码示例如下所示。

const playerSdk = new VePlayer({
  id: 'video',
  width: 800,
  height: 500,
  getVideoByToken: {
    playAuthToken: 'video_playAuthToken'
  },
  onTokenExpired: () => {
    return new Promise(resolve => {
      // 调用您的接口获取新的 playAuthToken
      getNewToken().then(res => {
        resolve({
          playAuthToken: 'new playAuthToken', // 新的 playAuthToken
          keyToken: 'new keyToken' // 'hls 加密播放时传入新的 keyToken'
        })
      })
    });
  }
});

获取播放状态

您可通过 playerSdk.player.state 获取播放器当前所处的播放状态。示例代码如下所示。

const playerSdk = new VePlayer({
  id: 'video',
  width: 800,
  height: 500,
  url: 'xx.mp4'
});

// 获取播放状态
const playerState = playerSdk.player.state;

播放状态枚举值的详细说明如下表所示。

设置音量

设置音量包括音量大小调节和静音设置。VePlayer 默认 UI 中自带音量设置控件，您可自行调节音量或者设置静音。
如果自定义 UI，可以通过以下方法实现。

• 设置音量的代码示例如下所示。

  // 配置音量，实例化时传入 volume 参数
  const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    volume: 0.2,
    url: 'xx.mp4'
  });  
  
  // 设置音量，实例的 player 进行设置
  playerSdk.player.volume = 0.2;
  

• 设置静音的代码示例如下所示。

  playerSdk.player.muted = false;
  

倍速播放

在点播场景下，VePlayer 默认 UI 中自带倍速播放设置控件。您可以根据需要调节播放速度，默认提供 0.5x、0.75x、1x、1.25x、1.75x、2x 的倍速选项。
如果有其他速度设置需求。可调用以下方法，实现的代码示例如下所示。

const playerSdk = new VePlayer({
  id: 'video',
  width: 800,
  height: 500,
  url: 'xx.mp4'
});  

// 播放倍速设置
playerSdk.player.playbackRate = 3;

获取当前播放速度，实现的代码示例如下所示。

const playbackRate = playerSdk.player.playbackRate

切换清晰度

VePlayer 提供清晰度切换控件，支持用户自行切换不同清晰度的视频。具体效果如下图所示：

显示多个清晰度

为实现清晰度切换功能，您需要准备同一视频的不同清晰度版本。您可以通过视频点播控制台的媒体处理功能获取同一视频的不同清晰度版本，具体操作请见视频转码模板。
不同的播放模式下，显示清晰度切换控件的实现方式有所不同。

const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    getVideoByToken: {
        playAuthToken: 'yourplayAuthToken',
        definitionMap: {
            'original': '原画',
            '360p': '流畅',
            '480p': '标清',
            '720p': '高清',
            '1080p': '蓝光·',
        },
    },
});

const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    playList: [
        {
            url: 'xx480.mp4',
            definition: '标清'
        },
        {
            url: 'xx720.mp4',
            definition: '高清'
        },
        {
            url: 'xx1080.mp4',
            definition: '超清'
        }
    ]
});

显示单个清晰度

在以下仅有单个清晰度视频的场景中，VePlayer 默认不会显示清晰度切换控件：

• 实例化参数中只设置了 url 地址。
• playList 中只设置了一路流。
• Vid 模式播放时服务端只返回了一路流。

如果您仍然期望显示清晰度切换控件，可将实例化参数 alwaysShowDefinition 设为 true 。此外，如果您还需自定义该清晰度对应的文案，不同的播放模式下，实现方式有所不同。示例代码如下：

const playerSdk = new VePlayer({
    id: 'video',
    width: 640,
    height: 360,
    // 设置单个清晰度时也显示清晰度切换控件
    alwaysShowDefinition: true,
    getVideoByToken: {
        playAuthToken: 'yourplayAuthToken',
        definitionMap: {
        '480p': {
          definitionTextKey: 'HD'
        },
    },
    languages: {
      'zh': {
        // 自定义 HD 对应的文案
        HD: '超清',
      },
});

const playerSdk = new VePlayer({
    id: 'video',
    url: "playback_url",
    width: 640,
    height: 360,
    // 设置单个清晰度时也显示清晰度切换控件
    alwaysShowDefinition: true,
    // 自定义清晰度文案
    definitionText: '超清',
    // 多语言场景下，可通过设置 definitionTextKey 来自定义清晰度文案
    // definitionTextKey: 'HD',
    // languages: {
    //  'zh': {
        // 自定义 HD 对应的文案
    //    HD: '超清',
    //  },
    // },
});

循环播放

在点播场景下，播放器参数 loop 设置为 true，即可开启循环播放。实现的代码示例如下所示。

const playerSdk = new VePlayer({
  id: 'video',
  width: 800,
  height: 500,
  loop: true,
  url: 'xx.mp4'
});

自动播放

自动播放是指在用户没有主动交互（如鼠标点击、手指触摸）的情况下，通过 autoplay 配置、JavaScript 代码调用 play() 方法，或者定时器、Promise 回调、事件监听等方式，在页面加载完成后自动启动视频播放的功能。这种功能允许视频在页面加载后立即开始播放，而无需用户手动点击播放按钮。

由于浏览器策略的限制，自动播放并非总能成功。浏览器从用户角度考虑，认为网页或应用程序没有警告自动发出噪音可能会令人讨厌、不便或令人反感，因此通常仅允许在特定情况下进行自动播放。

自动播放的配置和条件

VePlayer 提供 autoplay、autoplayMuted、enableDegradeMuteAutoplay 和 enableUserActionAutoplay 四个自动播放相关的配置，详见 IPlayerConfig。但是自动播放能否成功，在不同浏览器环境中还需要满足以下条件。

PC 端自动播放

根据最新的 PC 端浏览器策略，允许自动播放至少需要满足以下任意条件：

具体请见 Google Chrome 和 WebKit 的自动播放策略。

• 音频被静音或其音量设置为 0。
• 以下条件允许自动播放：
  • 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）。

    交互行为的回调中执行 play() 的上下文中必须能跟踪到真实的用户交互行为。伪造的用户交互行为不被接受。

  • 网站已被列入白名单，如果浏览器确定用户经常与媒体互动，就会被列入允许自动播放的白名单，有时也支持用户自行设置。
    • Chrome 通过 Media Engagement Index (MEI) 自动对网站是否允许自动播放进行评分。

      说明

      您可以在 chrome://media-engagement/ 查看网站的 MEI 评分。因为各个用户的浏览器评分不一致，所以会出现同一个网站有的用户能自动播放，有的不能，但随着用户与网站交互增多，评分会随之升高，也就允许自动播放了。一些访问量较大的视频网站，例如腾讯视频、bilibili、YouTube，因为网站访问者与其交互较多且大多数允许自动播放，会被 Chrome 的算法自动加入自动播放白名单，详见 Autoplay Pre-Seeding in Chrome。

    • Safari 通过偏好设置 > 网站 > 自动播放或地址栏右键对该网站设置是否允许自动播放。
• 顶部框架可以将自动播放权限委派给其 iframe，以允许自动播放声音。

H5 和移动端 WebView 上自动播放

H5 和移动端 WebView 上默认禁止有声音的自动播放。您可以选择自动静音播放，示例代码如下：

const playerSdk = new VePlayer({
  // ...
  autoplay: true,
  autoplayMuted: true,
  // enableDegradeMuteAutoplay: true, // 开启自动降级静音播放，即有声音播放不支持时自动降级到静音自动播放
});

如果是在业务方可控的 WebView 上运行网站应用，还需开启 WebView 自动播放相关配置以实现自动播放。

• Android 设置 setMediaPlaybackRequiresUserGesture。示例代码如下：

  myWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
  

• iOS WKWebView 设置 mediaTypesRequiringUserActionForPlayback。示例代码如下：

  [self.webvie mediaTypesRequiringUserActionForPlayback:NO];   
  

判断自动播放是否成功

您可以通过以下方式判断自动播放是否成功。

通过 API 返回结果判断

通过 JavaScript 代码调用 play() 方法实现自动播放不一定能成功。通常来说可以根据 play() 返回的 Promise 操作结果来判断是否成功：

• 成功时会返回状态为 resolve 的 Promise 结果。
• 失败时则返回携有 NotAllowedError 错误且状态为 rejected 的 Promise 结果。

示例代码如下：

let startPlayPromise = playerSdk.player.play();

if (startPlayPromise !== undefined) {
  startPlayPromise.catch(error => {
    if (error.name === "NotAllowedError") {
      // TODO Do something when not autoplay success
    } else {
      // Handle a load or playback error
    }
  }).then(() => {
    // Start whatever you need to do only after playback
    // has begun.
  });
}

通过监听自动播放失败事件

您可以监听 Web 点播 SDK 的以下事件来判断自动播放是否被阻止：

• autoplay_was_prevented: 自动播放被阻止。
• autoplay_failed: 自动播放失败。

示例代码如下：

const playerSdk = new VePlayer({
  // ...
  autoplay: true,
});
playerSdk.on('autoplay_was_prevented', () => {
  // TODO something
  console.log('自动播放被阻止');
});

如果是默认静音自动播放，非用户行为下设置播放器 muted 属性为 true 时（playerSdk.player.muted = false），在不支持有声音自动播放的浏览器环境下，浏览器会强制视频暂停。

播放源过期自刷新

您从视频点播服务获取的视频播放地址默认开启了时间戳防盗链功能。在视频播放过程中，可能因为视频地址未及时使用、用户进行 Seek 播放或循环播放等操作，视频地址过期，导致视频无法继续观看。VePlayer 提供相应的事件监听视频播放地址是否过期，并支持配置自动刷新视频播放地址。通过这样的配置，即使视频播放地址过期，VePlayer 也能自动重新获取有效的播放地址，使用户能够继续观看视频。

监听播放源是否过期

方式一：通过时间戳比较过期监听

您需自行指定该播放源的过期时间戳。播放器会轮询地将播放器所在的客户端时间与过期时间戳进行比较。过期前 60 秒时，SDK 会触发 Events.MEDIA_EXPIRED 事件，提示地址即将过期。

const playerSdk = new VePlayer({
        id: 'video-container',
        getVideoByToken: {
          playAuthToken: 'playAuthTokenxxxx'
        },
        // 开启地址过期检测
        enableUrlExpireCheck: true,
        vodLogOpts: {
            vtype: 'MP4',
            tag: '普通视频',
            line_app_id: xxxx,
            line_user_id: 'veplayer_web_demo'
        }
});

playerSdk.on(VePlayer.Events.MEDIA_EXPIRED, (err) => {
      console.log('地址过期', err);
})

const playerSdk = new VePlayer({
        id: 'video-container',
        // 该地址中 1724135102 为过期时间戳
        url: 'https://voddemo.demo.com/453b1f794dfa49f4819b5d923658411a?auth_key=1724135102-UCQrGayCc9-uxue-c1b5966b82630cd45eefaa0f73b9137a',
        // 开启地址过期检测
        enableUrlExpireCheck: true,
        // 设置过期时间戳
        urlExpireTimestamp: 1724135102,
        vodLogOpts: {
            vtype: 'MP4',
            tag: '普通视频',
            line_app_id: xxxx,
            line_user_id: 'veplayer_web_demo'
        }
    });

playerSdk.on(VePlayer.Events.MEDIA_EXPIRED, (err) => {
      console.log('地址过期了 ', err);
})

const playerSdk = new VePlayer({
        id: 'video-container',
        // 开启地址过期检测
        enableUrlExpireCheck: true,
        playList: [
            {
              url: 'https://voddemo.demo.com/e826c993a2444058915fb494c4fcdabb?a=0&auth_key=1817600800-8882fc603afb49edbb2665e62c95c69b-0-32390643c8637e4d3e46e87a684d5a4b&br=660&bt=660&cd=0%7C0%7C0&ch=0&cr=0&cs=0&cv=1&dr=0&ds=3&er=0&l=20220708180015010204028132080F0005&lr=&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amg6c2o0aTg6ZTQzNGRnM0ApZzg6ZzkzZTxoN2QzNGY3NWdfZy9gMHFrYTBgLS1kYy9zc2IwNS4wM2NhYjZhMi4wNTY6Yw%3D%3D&vl=&vr=',
              definition: '1080p',
              // 设置过期时间戳
              urlExpireTimestamp: 1817600800,
            },
            {
              url: 'https://voddemo.demo.com/453b1f794dfa49f4819b5d923658411a?auth_key=1717582800-830c08a311bb49fab40dbaa90ebd4db3-0-1b61cbd491235c69d89a694bd51a1027',
              definition: '720p',
              // 设置过期时间戳
              urlExpireTimestamp: 1717582800,
            },
        ],
        vodLogOpts: {
            vtype: 'MP4',
            tag: '普通视频',
            line_app_id: xxxx,
            line_user_id: 'veplayer_web_demo'
        }
    });

playerSdk.on(VePlayer.Events.MEDIA_EXPIRED, (err) => {
      console.log('地址过期', err);
})

方式二：通过播放错误监听

在视频播放地址过期时间未知的情况下，如果地址过期，播放器会触发网络类错误。为了确认该错误是否由地址过期引起，播放器会主动对地址的有效性进行校验。一旦确认地址过期，播放器会触发地址过期事件，告知视频资源已过期。
为了确保该功能正常运行，视频播放地址所使用的域名需要配置了 HTTP 返回 CORS 跨域头。您可以通过视频点播控制台进行配置 HTTP 响应头。推荐设置以下配置：

刷新播放源

您可以通过以下两种方式实现播放源过期后刷新播放源。

监听到过期事件后主动更新播放源

您可以监听过期事件 Events.MEDIA_EXPIRED。在监听回调中，进行以下操作：

1. 从应用服务端获取新的播放源数据。播放源数据可以是视频播放地址 url、播放列表 playList 或者 vid 和 playAuthToken，还需包含新地址的过期时间戳 urlExpireTimestamp。
2. 调用 SDK 提供的 updateMediaSource 方法将新的播放源数据传入 SDK。

示例代码如下：

const playerSdk = new VePlayer({
  id: 'video-container',
  url: 'https://veplayer.demo.com/453b1f794dfa49f4819b5d923658411a?auth_key=1717547753-UCQrGayCc9-xiong-c1b5966b82630cd45eefaa0f73b9137a',
  enableUrlExpireCheck: true,
  urlExpireTimestamp: 1717547753,
  vodLogOpts: {
    vtype: 'MP4',
    tag: '普通视频',
    line_app_id: xxx,
    line_user_id: 'veplayer_web_demo',
  },
});

// 监听过期事件
playerSdk.on(VePlayer.Events.MEDIA_EXPIRED, err => {
  console.log('地址过期了 ', err);
  // 从业务服务端重新获取新的视频播放地址及地址过期时间戳
  appServer.getPlayUrl().then((res) => {
    playerSdk.updateMediaSource({
      url: res.url,
      urlExpireTimestamp: res.urlExpireTimestamp,
    });
  })
});

设置过期回调自动刷新播放源

您可以在实例化播放器时设置 onMediaExpired 回调函数。该回调函数应返回一个包含播放源信息的数据对象，可以是视频播放地址 url、播放列表 playList 或者 vid 和 playAuthToken。此外，数据对象还需要包含新地址的过期时间戳 urlExpireTimestamp。当 Events.MEDIA_EXPIRED 事件触发后，播放器会自动调用 onMediaExpired 回调函数，并将其返回的结果作为 updateMediaSource 方法的输入，从而自动更新播放源。示例代码如下：

const playerSdk = new VePlayer({
        id: 'video-container',
        url: 'https://veplayer.demo.com/d174bc4b9b32482582d3a07816a2104a/main.m3u8?auth_key=1718253922-987655e64a9f4c0dbf568f6397bd6232-0-5c0fa62ad9bcbee2c024b55824350d43',
        enableUrlExpireCheck: true,
        urlExpireTimestamp: 1618246275,
        onMediaExpired: async () => {
          // 从业务服务端重新获取新的视频地址及地址过期时间戳
          const res = await appServer.getPlayUrl();
          return {
            url: res.url,
            urlExpireTimestamp: res.urlExpireTimestamp,
          };
        },
        vodLogOpts: {
            vtype: 'MP4',
            tag: '普通视频',
            line_app_id: xxx,
            line_user_id: 'veplayer_web_demo'
        }
});

playerSdk.on(VePlayer.Events.MEDIA_EXPIRED, (err) => {
      console.log('地址过期了 ', err);
})

以 <source /> 元素设置播放源

VePlayer 支持在 HTML <video /> 元素中使用 <source /> 元素设置多种格式的视频源，以兼容不同的浏览器环境。

为了设置多种格式的视频源，您只需以数组的形式描述 URL。每个数组项应包含视频播放地址 src 和视频容器格式类型 type。其中，type 描述的通常是视频格式的 MIME 类型，只支持浏览器直接支持播放的视频格式。以下是常见容器格式及对应的 MIME 类型和文件扩展名：

示例代码如下：

const playerSdk = new VePlayer({
  id: 'video-container',
  url: [
    {
      // MOV 格式，苹果设备支持
      src: 'https://voddemo-play.volcvod.com/source_video.MOV',
      type: 'video/quicktime'
    },
    {
      src: 'https://voddemo-play.volcvod.com/source_video.mp4',
      type: 'video/mp4',
    },
  ],
  vodLogOpts: {
    vtype: 'MP4',
    tag: '普通视频',
    line_app_id: xxxx,
    line_user_id: 'veplayer_web_demo'
  }
});

视频旋转

设置 rotate 配置使用的旋转插件。用户点击旋转按钮后，视频会旋转 90 度。

const playerSdk = new VePlayer({
  id: 'video',
  width: 800,
  height: 500,
  url: 'xx.mp4',
  // 视频旋转按钮配置项，默认值：{ innerRotate: false, clockwise: false }
  rotate: {
    innerRotate: true, //只旋转内部 video
    clockwise: false // 旋转方向是否为顺时针
  }
});

进度条预览缩略图

VePlayer 支持在拖拽进度条时，通过查看视频缩略图快速预览指定位置的视频内容。VePlayer 是以服务端提供的雪碧图作为预览图资源，并在前端根据鼠标指针的位置计算并显示对应时间点的预览图。
雪碧图是由多帧截图拼接而成的一张大图，具有以下好处：

• 图片体积小：将许多小图合并到一张大图中，可以减少图片文件的大小。
• 请求次数少：通过图片整合，减少用户对服务器的请求次数，从而提高页面打开速度。

以下为一张雪碧图示例。该雪碧图中共包含 13 张缩略图。

基于上述雪碧图的进度条缩略图预览效果如下：

如需在播放端展示雪碧图，请先通过视频点播媒体处理服务生成雪碧图，详细操作请见雪碧图。Vid 播放模式和 DirectUrl 播放模式均支持展示雪碧图，实现方式有所不同，具体说明如下。

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  // Vid 播放配置
  getVideoByToken: {
    playAuthToken: '临时playAuthToken', // 需要从服务端获取
    ....
    needThumbs: true
});

var playerSdk = new VePlayer({
        id: 'mse',
        url: "https://vod-typea.byte-test.com/%E6%B5%8B%***%E8%A7%86%E9%A2%9101.mp4?auth_key=1700723919-0fa7dcfbfce141f89f6***4920703c14d485f569ebf4670d69e", // 视频地址
        width: 640,
        height: 360,
        // 本示例中，一共从视频中截取 38 张缩略图。
        // 截取的缩略图越多，进度条预览越精确，图片越大加载越慢，需要您根据业务需求自行判断。
        // 每张雪碧大图最多可包含 10*10 = 25 张缩略小图，所以仅需 1 张雪碧大图。
        thumbnail: {
            // 缩略小图总张数
            pic_num: 38,
            // 缩略图宽
            width: 240,
            // 缩略图高
            height: 136,
            // 雪碧大图中每列包含的缩略小图数量。
            col: 10,
            // 雪碧大图中每行包含的缩略小图数量。
            row: 10,
            // 雪碧图 URL 地址
            urls: ["http://p6-vedit-sign.byteimg.com/tos-cn-v-d67d0e/7ea3f6dbc4a049599945e9f96d106c7b_1659088327~tplv-noop.image?x-expires=1690624695&x-signature=q7VjLGZMLehRrN1j9uIgfvIfwMY%3D"]
        }
    });

查看视频信息

播放器入参中传入 enableContextmenu 和 closeVideoStopPropagation，取值同时设置为 true，可在播放器上右键查看视频信息。实现的示例代码如下所示。

const playerSdk = new VePlayer({
    id: 'mse',
    width: 600,
    height: 400,
    enableContextmenu: true,
    closeVideoStopPropagation: true,
    getVideoByToken: {
        playAuthToken: 'playAuthToken',
    },
});

MP4 MSE 播放模式

MP4 视频播放时，在不优化视频 MOOV box 结构且不进行视频转码的情况下，通常起播较慢。VePlayer 支持以 MSE 形式播放 MP4 视频，该模式起播更快，支持缓存播放，从而节省流量，示例代码如下所示。

const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    url: 'xx265.mp4',
    enableMp4MSE: true
});

音乐播放器模式

VePlayer 支持音乐播放器模式，具有音乐封面、音乐列表、循环播放、码率切换等功能。效果如下图所示。

如需开启音乐播放器模式，您需在实例化 VePlayer 时，将 isMusic 参数设为 true。此外，您还可以配置音乐播放器。不同的播放模式下，配置方式有所不同。

const playerSdk = new VePlayer({
    id: "music",
    width: 640,
    height: 90,
    isMusic: true,
    title: "Final Touch/Hidden Agenda",
    poster: "https://s1.ax1x.com/2023/01/05/pSAQx78.jpg",
    getVideoByToken: {
      playAuthToken: 'eyJHZXRQbGF5SW******aWVzIiwiVG9rZW5WZXJzaW9uIjoiVjIifQ==',
      definitionMap: {
        'highest': {
          definition: 'Highest quality',
          definitionTextKey: 'highest'
        },
        higher: {
          definition: 'Higher quality',
          definitionTextKey: 'higher'
        },
        medium: {
          definition: 'Medium quality',
          definitionTextKey: 'medium'
        },
      },
    },
    languages: {
      zh: {
        medium: '普通音质',
        higher: '高音质',
        highest: '无损音质',
      },
      en: {
        medium: 'Normal',
        higher: 'Higher',
        highest: 'Lossless',
      }
    }
  });
        

const playerSdk = new VePlayer({
    id: "music",
    width: 640,
    height: 90,
    isMusic: true,
    music: {
      timeScale: 10,
      mode: 'random',
      list: [
        {
          src: "http://voddemo-play.volcvod.com/oAY***t3KVQbUFYt?auth_key=1767535549-1da3a9f79dc145418c***b6f02d1c925aa",
          title: "Final Touch/Hidden Agenda",
          vid: "v0ddfag10001cerdcarelau57rco03c0",
          poster: "https://s1.ax1x.com/2023/01/05/pSAQx78.jpg",
        },
        {
          src: "http://voddemo-play.volcvod.com/Solitude.mp3?auth_key=1767535452-d24740adae50477eba***16adc8b8df4d97d4",
          title: "Solitude",
          vid: "v02dfag10001cerdcarelauag2njv000",
          poster: "https://s1.ax1x.com/2023/01/05/pSAlSAS.jpg",
        },
        {
          src: "http://voddemo-play.volcvod.com/oASg***WdZjLtvD0Og2TFaXmQQ?auth_key=1767353155-b920aaf***3a896d164a3b6f7ba03d",
          title: "Merry Christmas Mr. Lawrence",
          vid: "Merry Christmas Mr. Lawrence",
          poster: "https://y.qq.com/music/photo_new/T002R300x300M000002NSlUO1Isxd3_2.jpg?max_age=2592000",
        }
      ]
    },
  });
        

音乐播放器模式的相关属性如下表所示。

playerSdk.musicMode = 'order'; //顺序播放

playerSdk.musicTimeScale = 10; // 设置时间跨度为10s

playerSdk.musicList = [
  { title: '歌曲1', vid: 'music1', src: 'https://demo.com/music1.mp3'},
  { title: '歌曲2', vid: 'music2', src: 'https://demo.com/music2.mp3'}
]; // 设置播放列表

音乐播放器模式的相关方法如下表所示。

playerSdk.musicAdd({
  src:'https://demo.com/music.mp3',
  title:'demo_music',
  vid: 'demo_music',
  poster: 'https://demo.com/poster.jpg'
});

playerSdk.musicRemove('music_list_2');

playerSdk.musicRandom();

playerSdk.musicNext();

playerSdk.musicPrev();

playerSdk.musicSetIndex(2);

playerSdk.musicPrev();

playerSdk.musicBackward();

playerSdk.musicSetAbCycle({
  start: 3,
  end: 30,
  loop: true,
});

playerSdk.musicRemoveAbCycle();

外挂字幕

详见使用插件 - 外挂字幕。

记忆播放

详见使用插件 - 记忆播放。

视频镜像

详见使用插件 - 视频镜像。

播放列表

详见使用插件 - 播放列表。

动态水印

详见使用插件 - 动态水印。