本文介绍如何使用 Web 拉流 SDK（VePlayer）配置多条播放线路和清晰度选项，该功能适用于需支持用户手动切换或系统自动选择清晰度/CDN 路线的业务场景，有助于在复杂网络条件下提供更优播放体验。

适用版本

本文档适用于最新版本的 Web 拉流 SDK，版本信息请参考发布历史，历史版本请参考历史文档。

前提条件

已完成 SDK 集成。

配置示例

您可通过配置 playlist 实现多线路或多清晰度。配置 defaultSource 和 defaultDefinition 可以指定默认线路和默认清晰度。播放器创建成功后可调用 switch 方法切换线路或清晰度。

• 设置多线路时，代码示例如下所示。

  通过 CDN 集成

  通过 NPM 集成

  VePlayer.createLivePlayer({
  	  height: 360,
  	  defaultSource: 'lineOne',
  	  playlist: [
  	    {
  	      name: 'lineOne',
  	      text: { 'zh-cn': '线路一', en: 'lineone' },
  	      definitions: ['https://pulldomain/appname/mystream_hd.m3u8'],
  	    },
  	    {
  	      name: 'lineTwo',
  	      text: { 'zh-cn': '线路二', en: 'linetwo' },
  	      definitions: ['https://pulldomain/appname/mystream1_hd.m3u8'],
  	    },
  	  ],
  	  logger: {
  	    appId: '5****8',
  	  },
  	}).then(function (veplayer) {
  	  // 调用 switch 方法切换线路
  	  veplayer.switch({ source: 'lineTwo' });
  	});        
  

  import { createLivePlayer, register } from '@volcengine/veplayer';
  	import { hls } from '@volcengine/veplayer-plugin';
  	import '@volcengine/veplayer/style'
  	register([hls]);
  	createLivePlayer({
  		  height: 360,
  		  defaultSource: 'lineOne',
  		  playlist: [
  		    {
  		      name: 'lineOne',
  		      text: { 'zh-cn': '线路一', en: 'lineone' },
  		      definitions: ['https://pulldomain/appname/mystream_hd.m3u8'],
  		    },
  		    {
  		      name: 'lineTwo',
  		      text: { 'zh-cn': '线路二', en: 'linetwo' },
  		      definitions: ['https://pulldomain/appname/mystream1_hd.m3u8'],
  		    },
  		  ],
  		  logger: {
  		    appId: '5****8',
  		  },
  		}).then(function (veplayer) {
  		  // 调用 switch 方法切换线路
  		  veplayer.switch({ source: 'lineTwo' });
  		});        
  

• 设置多清晰度时，代码示例如下所示。

  通过 CDN 集成

  通过 NPM 集成

  VePlayer.createLivePlayer({
  	  height: 360,
  	  defaultDefinition: 'ld',
  	  playlist: [
  	    {
  	      definitions: [
  	        {
  	          url: 'https://pulldomain/appname/mystream_hd.m3u8',
  	          definition: 'hd',
  	          text: { en: 'hd', 'zh-cn': '超清' },
  	        },
  	        {
  	          url: 'https://pulldomain/appname/mystream_sd.m3u8',
  	          definition: 'sd',
  	          text: { en: 'sd', 'zh-cn': '高清' },
  	        },
  	        {
  	          url: 'https://pulldomain/appname/mystream_ld.m3u8',
  	          definition: 'ld',
  	          text: { en: 'ld', 'zh-cn': '标清' },
  	        },
  	      ],
  	    },
  	  ],
  	  logger: {
  	    appId: '5****8',
  	  },
  	}).then(function (veplayer) {
  	  // 调用 switch 方法切换清晰度
  	  veplayer.switch({ definition: 'hd' });
  	});        
  

  import { createLivePlayer, register } from '@volcengine/veplayer';
  	import { hls } from '@volcengine/veplayer-plugin';
  	import '@volcengine/veplayer/style'
  	register([hls]);
  	createLivePlayer({
  	  height: 360,
  	  defaultDefinition: 'ld',
  	  playlist: [
  	    {
  	      definitions: [
  	        {
  	          url: 'https://pulldomain/appname/mystream_hd.m3u8',
  	          definition: 'hd',
  	          text: { en: 'hd', 'zh-cn': '超清' },
  	        },
  	        {
  	          url: 'https://pulldomain/appname/mystream_sd.m3u8',
  	          definition: 'sd',
  	          text: { en: 'sd', 'zh-cn': '高清' },
  	        },
  	        {
  	          url: 'https://pulldomain/appname/mystream_ld.m3u8',
  	          definition: 'ld',
  	          text: { en: 'ld', 'zh-cn': '标清' },
  	        },
  	      ],
  	    },
  	  ],
  	  logger: {
  	    appId: '5****8',
  	  },
  	}).then(function (veplayer) {
  	  // 调用 switch 方法切换清晰度
  	  veplayer.switch({ definition: 'hd' });
  	});        
  

• 设置多线路和多清晰度时，代码示例如下所示。

VePlayer.createLivePlayer({
  height: 360,
  defaultDefinition: 'ld',
  defaultSource: 'lineOne',
  playlist: [
    {
      name: 'lineOne',
      text: { 'zh-cn': '线路一', en: 'lineone' },
      definitions: [
        {
          url: 'https://pulldomain/appname/mystream_hd.m3u8',
          definition: 'hd',
          text: { en: 'hd', 'zh-cn': '超清' },
        },
        {
          url: 'https://pulldomain/appname/mystream_ld.m3u8',
          definition: 'ld',
          text: { en: 'ld', 'zh-cn': '标清' },
        },
      ],
    },
    {
      name: 'lineTwo',
      text: { 'zh-cn': '线路二', en: 'linetwo' },
      definitions: [
        {
          url: 'https://pulldomain/appname/mystream1_hd.m3u8',
          definition: 'hd',
          text: { en: 'hd', 'zh-cn': '超清' },
        },
        {
          url: 'https://pulldomain/appname/mystream1_sd.m3u8',
          definition: 'sd',
          text: { en: 'sd', 'zh-cn': '高清' },
        },
        {
          url: 'https://pulldomain/appname/mystream1_ld.m3u8',
          definition: 'ld',
          text: { en: 'ld', 'zh-cn': '标清' },
        },
      ],
    },
  ],
  logger: {
    appId: '5****8',
  },
}).then(function (veplayer) {
  // 调用 switch 方法切换线路和清晰度
  veplayer.switch({ definition: 'hd', source: 'lineTwo' });
});        

import { createLivePlayer, register } from '@volcengine/veplayer';
import { hls } from '@volcengine/veplayer-plugin';
import '@volcengine/veplayer/style'
register([hls]);
createLivePlayer({
  height: 360,
  defaultDefinition: 'ld',
  defaultSource: 'lineOne',
  playlist: [
    {
      name: 'lineOne',
      text: { 'zh-cn': '线路一', en: 'lineone' },
      definitions: [
        {
          url: 'https://pulldomain/appname/mystream_hd.m3u8',
          definition: 'hd',
          text: { en: 'hd', 'zh-cn': '超清' },
        },
        {
          url: 'https://pulldomain/appname/mystream_ld.m3u8',
          definition: 'ld',
          text: { en: 'ld', 'zh-cn': '标清' },
        },
      ],
    },
    {
      name: 'lineTwo',
      text: { 'zh-cn': '线路二', en: 'linetwo' },
      definitions: [
        {
          url: 'https://pulldomain/appname/mystream1_hd.m3u8',
          definition: 'hd',
          text: { en: 'hd', 'zh-cn': '超清' },
        },
        {
          url: 'https://pulldomain/appname/mystream1_sd.m3u8',
          definition: 'sd',
          text: { en: 'sd', 'zh-cn': '高清' },
        },
        {
          url: 'https://pulldomain/appname/mystream1_ld.m3u8',
          definition: 'ld',
          text: { en: 'ld', 'zh-cn': '标清' },
        },
      ],
    },
  ],
  logger: {
    appId: '5****8',
  },
}).then(function (veplayer) {
  // 调用 switch 方法切换线路和清晰度
  veplayer.switch({ definition: 'hd', source: 'lineTwo' });
});