getVideoPopController:视频播放器

更新时间：2024/09/03 访问次数：282

开发
FAQ

开发

事件名

export enum EVideoEvent {
  popError = 'popError', // 短视频浮层失败
    popClose = 'popClose', // 短视频浮层关闭

    canplay = 'canplay',
    canplaythrough = 'canplaythrough',
    finish = 'finish',
    error = 'error',
    playing = 'playing',
    pause = 'pause',
    stalled = 'stalled',
    timeupdate = 'timeupdate',
    ended = 'ended',
    click = 'click',
    firstvideoframe = 'firstvideoframe',
    firstvideoframeinrender = 'firstvideoframeinrender',
    }

canplay:可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不需要停止缓存更多的内容。

canplaythrough:能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

finish:当视频完成播放后触发。

error*:当前视频播放错误时触发。

playing:视频正在播放时触发，包括第一次播放，暂停或中断后重新播放。

pause:播放已暂停。

stalled:卡顿时触发。

ended:当视频完成播放后触发。

click:当点击视频时触发。

firstvideoframe:播放第一帧时触发。

firstvideoframeinrender:视频开始渲染时触发。

error额外说明

标准参考：https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-erroropen in new window：

1 = MEDIA_ERR_ABORTED - 取回过程被用户中止

2 = MEDIA_ERR_NETWORK - 当下载时发生错误

3 = MEDIA_ERR_DECODE - 当解码时发生错误

4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持视频

接口

打开

const resizeImage = (originalWidth, originalHeight, containerWidth, containerHeight) => {
  const scaleWidth = containerWidth / originalWidth;
  const scaleHeight = containerHeight / originalHeight;
  const scale = Math.min(scaleWidth, scaleHeight);

  const width = originalWidth * scale;
  const height = originalHeight * scale;

  return { width, height };
}
const plugin = my.tb.getInteractiveSDK();
let videoPopController;
try {
  videoPopController = plugin.getVideoPopController();
} catch (e) {
  console.error(e);
  error('getVideoPopController init error',e.toString());
}

const { platform, windowWidth, windowHeight, screenWidth, screenHeight } = my.getSystemInfoSync();
const platformLower = platform?.toLowerCase?.();
// 需要手动设置视频尺寸
const videoSize = { width: 1080, height: 1920 };
const scaleSize = resizeImage(videoSize.width, videoSize.height, windowWidth || screenWidth, windowHeight || screenHeight);

// 因为iOS上尺寸计算有问题，需要开发者自行计算尺寸。
await videoPopController.open({
  width: platformLower === 'ios' ? scaleSize.width : undefined,
  height: platformLower === 'ios' ? scaleSize.height : undefined,
  url: 'https://xxxx.mp4',
  timeout: 5000,
});

如果你游戏横屏的，建议开启沉浸式模式，不然获取到的屏幕尺寸偏小，视频最后展示出来也是偏小。

配置信息：https://miniapp.open.taobao.com/doc.htm?spm=a219a.7386797.0.0.570e669aaDv75b&source=search&docId=121701&docType=1&tag=game-info

{
  "window":{
    "transparentTitle": "always"
  }
}

加载失败情况：

目前sdk针对持续处于stalled状态5秒会提示报错，会提示用户关闭浮层后重新进入；开发者可以通过设置timeout参数来设置等待时间，单位为毫秒；

关闭

try {
  await videoPopController.close();
} catch (hideVideoPopError) {
  console.log(hideVideoPopError);
}

事件监听

videoPopController.onEvent((data) => {
  console.log('onVideoEvent',data);
  if(data?.event === 'popClose'){
    videoPopController.offEvent();
    console.warn('短视频浮层关闭了')
  }else if(data?.event === 'error'){
    console.warn('短视频播放报错了')
  }
});

释放事件监听

videoPopController.offEvent();

FAQ

在IDE上无法打开视频浮层，怎么处理？

目前浮层无法在IDE上打开，建议直接使用真机调试和开发；

真机调试视频浮层，提示getVideoPopController不存在或者不是一个函数，应该如何处理？

因为属于SDK新功能，客户端会缓存老的SDK，不一定能执行到最新SDK的版本。建议开发者删掉手淘后重新再试；也建议开发去判断是否能拿到此Controller对象，如果拿不到此对象，给与用户一定的提示。

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

淘宝开放平台

API