You need to enable JavaScript to run this app.
导航

基础功能

最近更新时间2024.01.11 21:10:49

首次发布时间2021.05.17 17:30:40

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);
 })

说明

  • 播放器内核的创建是一个异步过程,直接在播放器实例化后获取内核是无法直接拿到的,因为此时内核还未完成创建。可以在SDK事件(如complete事件)触发后从SDK实例的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 模式播放

VePlayer 结合视频点播服务,可以实现视频 Vid+PlayAuthToken 播放。

如下为您介绍实现视频 Vid+PlayAuthToken 播放的操作步骤。

获取 playAuthToken

首先,在服务端通过 Vid 生成播放使用的 playAuthTokenplayAuthToken 除了包含视频 Vid 等信息,还可以通过参数指定视频分辨率、转码类型、封装格式等信息。

说明

获取的视频,默认是 mp4 格式非加密视频。如果 playAuthToken 没有指定格式、分辨率等信息,可以在 reqParams 中通过 FormatDefinition 来透传参数,可传参数详见获取播放地址

配置参数

在 VePlayer 实例化参数中传入getVideoByToken

详细的参数说明如下所示。

参数
类型是否必选描述
playAuthTokenString服务端生成的临时 playAuthTokentoken 有一定有效期,过期后需服务端重新生成。
playDomainString请求地址接口域名。默认值为 '//vod.volcengineapi.com'

reqParams

Object

可携带 aid 等透传参数。例如,

{aid: 1234}

说明

通过 reqParams 传入的参数,如果 playAuthToken 中已经包含,则以 playAuthToken 为准,透传的参数不生效。

definitionMap

Object

定义清晰度文案的映射。例如,

{'480p': '标清', '720p': '高清'}
{ '480p': { definition: 'hd', definitionTextKey: 'HD' }, '720p': { definition: 'uhd', definitionTextKey: 'UHD' }}

说明

definitionTextKey 用来指定多语言的 key。

defaultDefinition

String

默认清晰度,对应获取播放地址接口返回的清晰度,取值如下:

  • 240p

  • 360p

  • 480p

  • 540p

  • 720p

  • 1080p

  • 2k

  • 4k

  • od(原画转封装)

  • oe(画质增强)

needPosterBoolean前提有封面图。是否启用控制台设置的封面图
needThumbsBoolean前提是已转码并生成雪碧图。是否启用控制台设置的雪碧图
needBarrageMaskBoolean前提是已转码并生成蒙版弹幕。是否启用控制台设置的蒙版弹幕
keyTokenBooleanHLS 标准加密播放所用的 keyToken

配置参数的代码示例如下所示。

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: 'hd',
        definitionTextKey: 'HD'
      },
      '720p': {
        definition: 'uhd',
        definitionTextKey: 'UHD'
      }
    }
  },
  languages: {
    'zh': {
      ORI: '原画',
      LD: '标清',
      HD: '超清',
      UHD: '蓝光'
    }
  }
});

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'
        })
      })
    });
  }
});

说明

onTokenExpired 要求返回为 getVideoByToken 类型的 Promise 异步函数。

播放质量上报

VePlayer 提供播放质量上报功能,可以监控和上报播放量、播放失败率和首帧时间等指标。接入播放质量上报功能后,您可以在视频点播控制台的质量平台查看各个播放质量指标的详细情况。

如需接入播放质量上报功能,您需在播放器实例化的 options 参数中传入 vodLogOpts。示例代码如下:

const player = new VePlayer({
  id: 'video',
  width: 600,
  height: 400,
  url: "https://demo.vod.com/xxx.mp4",
  vodLogOpts: {
    line_app_id: XXXX, // 【必选】该值为 int 类型,接入视频点播的SDK应用 ID ,可以从点播控制台-点播SDK-应用管理获取。
    line_user_id: 'XXX', // 用户 ID, String 或者 int 类型,不传入将是一个根据用户浏览器随机生成的值。
    tag: '普通视频', // 业务标签,对应业务类型,用于区分业务中不同的场景,方便后续进行多维度分析。
  }
});

vodLogOpts 各项配置参数如下所示。

参数
类型默认值是否必选描述
line_app_idNumber-视频点播应用 ID。您可在视频点播控制台 > 点播SDK > 应用管理页面获取应用 ID(App ID)。

line_user_id

String

-

用于识别单一用户的 ID,可在 QoE 指标中用于用户维度的筛选。

说明

强烈建议您使用与业务相关的用户 ID,以便在发生播放错误时通过点播控制台 > 质量平台 > 单点追查功能排查故障。

用户 ID 对应于单点追查功能的查询条件中的设备 ID 维度。如不设置用户 ID,VePlayer 将根据用户浏览器随机生成一个值,该值会在浏览器端缓存。

tag

String

default

业务标签。对应于质量平台上的业务类型维度,其作用是区分业务中的不同场景,以便进行多维度分析。举例来说,假设您的应用中包含短视频长视频两个场景,则可分别将 tag 设为 shortlong。这样一来,您就能够在质量平台上通过业务标签维度查询或过滤不同场景的数据。

说明

如需自定义配置 tag 值在点播控制台上的展示文案,请联系技术支持

subtagString-自定义子标签。对应于质量平台上的自定义标签维度,与 tag 配合使用,可用于区分同一业务类型下更为细分的音视频类型,比如加密视频、非加密视频、音频等。

codec_type

String

h264

视频解码器类型名称。取值如下:

  • h264:H.264。
  • h265:H.265。
maxQueueCountNumber5最大队列日志数。

获取播放状态

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

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

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

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

名称数值描述
ERROR0播放出现错误。
INITIAL1初始化。
READY2配置、事件、插件等均已经完成初始化、绑定和实例化。
ATTACHING3进入媒体对象挂载阶段。
ATTACHED4媒体对象已经挂载到了 DOM 中。
NOTALLOW5播放被阻止。
RUNNING6已经成功起播进入播放流程。
ENDED7播放结束。
DESTROYED8播放器内核实例已被销毁。

设置音量

设置音量包括音量大小调节和静音设置。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.playbackRate

切换清晰度

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

显示多个清晰度

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

不同的播放模式下,显示清晰度切换控件的实现方式有所不同。

如果您使用 Vid+PlayAuthToken 方式播放,则只需设置 playAuthToken,不限定清晰度 、Definition 对应签发参数,并确保控制台中有对应各个清晰度的转码产物,VePlayer 会自动展示清晰度切换控件。如果您需要自定义各清晰度对应的文案,可传入 definitionMap。示例代码如下:

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

显示单个清晰度

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

  • 实例化参数中只设置了 url 地址。

  • playList 中只设置了一路流。

  • Vid 模式播放时服务端只返回了一路流。

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

使用 Vid+PlayAuthToken 方式播放的示例代码如下:

const playerSdk = new VePlayer({
    id: 'video',
    width: 640,
    height: 360,
    // 设置单个清晰度时也显示清晰度切换控件
    alwaysShowDefinition: true,
    getVideoByToken: {
        playAuthToken: 'yourplayAuthToken',
        definitionMap: {
        '480p': {
          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 提供 autoplayautoplayMutedenableDegradeMuteAutoplayenableUserActionAutoplay 四个自动播放相关的配置,详见接口说明。但是自动播放能否成功,在不同浏览器环境中还需要满足以下条件。

PC 端自动播放

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

具体请见 Google ChromeWebKit 的自动播放策略。

  • 音频被静音或其音量设置为 0。

  • 以下条件允许自动播放:

    • 用户和网页已有交互行为(包括点击、触摸、按下某个键等等)。

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

    • 网站已被列入白名单,如果浏览器确定用户经常与媒体互动,就会被列入允许自动播放的白名单,有时也支持用户自行设置。

      • Chrome 通过 Media Engagement Index (MEI) 自动对网站是否允许自动播放进行评分。

        您可以复制此链接 chrome://media-engagement/ 查看网站的 MEI 评分。因为各个用户的浏览器评分不一致,所以会出现同一个网站有的用户能自动播放,有的不能,但随着用户与网站交互增多,评分会随之升高,也就允许自动播放了。

      • Safari 通过偏好设置 > 网站 > 自动播放地址栏右键对该网站设置是否允许自动播放。

  • 顶部框架可以将自动播放权限委派给其 iframe,以允许自动播放声音。

H5 和移动端 WebView 上自动播放

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

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

说明

需要注意在以下情况中,自动静音播放也不能生效:

  • iOS 端低电模式下,即使添加上 WebView 自动播放参数、或者是默认静音也都无法自动播放,因为播放视频被系统认定为耗能行为。

  • 由于安卓微信 WebView 的自动播放策略调整,在安卓微信下,禁止任何方式的自动播放。

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

判断自动播放是否成功

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

通过 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),在不支持有声音自动播放的浏览器环境下,浏览器会强制视频暂停。

视频旋转

设置 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 // 旋转方向是否为顺时针
  }
});

注意

innerRotate 为 false 时,播放器的宽高需要与视频的分辨率一致。

外挂字幕

VePlayer 支持 VTT 格式的外挂字幕,通过 Subtitle 设置字幕列表,可实现字幕切换,示例代码如下所示。

说明

字幕的具体配置项详情请参见 ISubtitleConfig

const playerSdk = new VePlayer({
  id: 'mse',
  url: "https://xx.mp4",
  width: 600,
  height: 400,
  plugins: [VePlayer.Subtitle],
  Subtitle: {
    isDefaultOpen: true,
    list: [
      {
        "src": "https://字幕1.vtt",
        "label": "中英",
        "default": true
      },
      {
        "src": "https://字幕2.vtt",
        "label": "中日",
        "default": false
      }
    ]
  },
});

记忆播放

VePlayer 可实现记忆播放的功能,可以在您上次观看视频离开后的时间点继续播放。传入 MemoryPlay 配置项,为视频配置唯一的 id: memoryId,即可实现记忆播放。代码示例如下所示。

const playerSdk = new VePlayer({
    id: 'mse',
    url: "https://xx.mp4",
    width: 600,
    height: 400,
    plugins: [VePlayer.MemoryPlay],
    MemoryPlay: {
        memoryId: 'example_memory_id'
    },
});

播放器默认使用浏览器的 localStorage API 存储播放时间,即默认情况下不能实现跨端跨平台共享存储记忆的播放时间点。

如果需要通过服务共享播放时间点,实现的方式如下所示。

  1. 传入 getTimesaveTime 两个函数;
  2. getTime 要求入参为 memoryId,返回为时间的同步或异步函数;
  3. saveTime 要求入参数可接受 memoryId 和时间的函数。

实现的示例代码如下所示。

const playerSdk = new VePlayer({
    id: 'mse',
    url: "https://xx.mp4",
    width: 600,
    height: 400,
    plugins: [VePlayer.MemoryPlay],
    MemoryPlay: {
        memoryId: 'example_memory_id',
        getTime: async (id) => {
            // ...异步处理
            // const time = await getTimeApi(id);
            return time;
        },
        saveTime: async (id, time) => {
            // 调用接口存储时间
        }
    },
});

在页面被隐藏、播放器被销毁、或者页面卸载时,VePlayer 会存储播放时间点。

注意

页面卸载时,如果传入的 saveTime 为异步函数,不能保证函数中的接口能执行完成。

视频镜像

VePlayer 支持水平方向的视频镜像功能。如下示例代码,可以快速实现镜像功能。

const playerSdk = new VePlayer({
  id: 'mse',
  url: "https://xx.mp4",
  height: 400,
  plugins: [VePlayer.MirrorPlugin],
});

播放列表

VePlayer 支持播放列表功能,即在给定一个视频列表后,按顺序自动播放列表中的视频。VePlayer 提供播放列表相关的 UI 以及“打开/隐藏播放列表”和“播放下一个视频”两个按钮。具体效果如下:

如需使用播放列表功能,您可在初始化播放器实例时设置 plugins 参数传入播放列表插件实例,再通过 playListPlugin 参数对播放列表功能进行初始化配置。示例代码如下:

说明

播放列表具体配置项请见 IPlayListConfig

const playerSdkIns = new VePlayer({
  id: 'video',
  width: 800,
  height: 600,
  // 注册播放列表插件
  plugins: [VePlayer.playListPlugin],
  // 配置播放列表插件
  playListPlugin: {
    list: [
      {
        url: 'xx.demo.com/1.mp4',
        poster: 'xx.demo.com/1.jpg',
        vid: '67ghsadd8a78s9df8',
        title: 'Remember to bring a little simple everyday',
      },
      {
        playAuthToken: 'demovideoplayAuthToken',
        poster: 'xx.demo.com/2.jpg',
        vid: '67ghsadd8a78s213df8',
        title: 'The night came quietly, with the heat and light',
      },
      {
        url: 'xx.demo.com/3.mp4',
        poster: 'xx.demo.com/3.jpg',
        vid: '67ghsaddhh78s9df8',
        title: 'Watching a beautiful fireworks at night will make you feel good',
      },
      {
        url: 'xx.demo.com/4.mp4',
        poster: 'xx.demo.com/4.jpg',
        vid: '67ghiodd8a78s9df8',
        title: 'Gentle and lazy sea breeze',
      },
    ],
  },
});

此外,播放列表插件提供 API 和事件,具体说明如下:

API

以下示例展示了如何播放下一个视频:

// 播放下一个视频
playerSdkIns.getPlugin('playListPlugin').next();

下表列出播放列表插件支持的 API。

API 名称类型参数说明返回值描述

next

() => void

播放下一个视频。如果当前正在播放最后一个视频,则跳转至第一个视频。

prev() => void播放上一个视频,如果当前正在播放第一个视频,则跳转至最后一个视频。

changeList

(items: listItem[]) => void

播放列表数组

更新播放列表。

setIndex(index: number) => void待播放视频的序号播放指定视频。

事件

以下示例展示了如何监听播放项变更:

playerSdkIns.on('play_list_item_change', data =>
  console.log('play_list_item_change, current item: ', data),
);

下表列出播放列表插件支持的事件。

事件****枚举值参数描述
play_list_changelistItem[]播放列表更新。
play_list_item_changelistItem播放项变更。

查看视频信息

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

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

alt

MP4 MSE 播放模式

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

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

说明

MSE 播放模式需要确认 mp4 地址,支持当前页面域名跨域请求,并且支持 range 请求,可以通过提交工单的方式配置跨域。

音乐播放器模式

VePlayer 支持音乐播放器模式,具有音乐封面、音乐列表、循环播放、码率切换等功能。

传入 isMusic 参数设置为 true 即开启音乐播放器模式,以 URL 播放为例:

const playerSdk = new VePlayer({
    id: "music",
    width: 640,
    height: 90,
    isMusic: true,
    url: "http://voddemo-play.volcvod.com/Solitude******4485191-0-d8d39b9e5d825bc516adc8b8df4d97d4",
    title: "Solitude",
    vid: "v02dfag10001cerdcarelauag2njv000",
    poster: "https://s1.ax1x.com/2023/01/05/pSAlSAS.jpg",
  });

效果如下图所示。

alt

不同的播放模式下,音乐播放器模式的实现方式有所不同。

支持 VID + PlayAuthToken 形式播放,示例代码如下所示。

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',
      }
    }
  });
        

配置音乐播放的详细信息如下表所示。具体可参考接口说明中 IMusicConfig

配置项
默认值
含义

mode

order

循环模式。取值如下:

  • order:顺序播放
  • sloop:单曲循环
  • loop:顺序播放
  • random:随机播放
preloadNexttrue开启预加载下一曲功能,当前歌曲播放到一半或列表循环顺序发生改变时会提前请求下一曲并存储在 IndexedDB 中

offline

false

是否支持播放后离线下载到本地

  • false:否
  • true:是
timeScale15 快进快退的时间跨度

abCycle

AB 循环配置对象

  • start 表示 AB 循环段起始时间
  • end 表示 AB 循环段结束时间
  • loop 表示AB段循环播放
list[]播放列表

对应的相关属性的详细信息如下表所示。

属性
是否可读是否可写描述示例

musicMode

当前播放模式

  • order:顺序播放
  • sloop:单曲循环
  • loop:顺序播放
  • random:随机播放
playerSdk.musicMode = 'order'; //顺序播放

musicTimeScale

快进快退时间跨度

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

musicList

音乐播放列表

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

相关方法的详细信息如下表所示。

方法
描述参数返回示例

musicAdd

向播放列表中加入歌曲

对象,具体可参考 IMusicListItem

  • src:音乐地址
  • vid: 音乐唯一 ID
  • poster:音乐封面
  • title:音乐标题

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

musicRemove

从播放列表中移除歌曲

歌曲列表中要删除歌曲对应的 Vid

playerSdk.musicRemove('music_list_2');

musicRandom

随机获取播放列表中某一首歌曲

歌曲信息,具体可参考 IMusicListItem

playerSdk.musicRandom();

musicNext

播放下一首歌曲

playerSdk.musicNext();

musicPrev

播放上一首歌曲

playerSdk.musicPrev();

musicSetIndex

选择第 n 首歌曲

Number 类型

playerSdk.musicSetIndex(2);

musicForward

歌曲快进timeScale秒

playerSdk.musicPrev();

musicBackward

歌曲后退 timeScale 秒

playerSdk.musicBackward();

musicSetAbCycle

设置 AB 循环

对象,具体可参考 IABCycle

  • start:AB 循环段开始时间
  • end:AB 循环段结束时间
  • loop:AB 段是否循环

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

musicRemoveAbCycle

移除 AB 循环

playerSdk.musicRemoveAbCycle();