uni-app 视频播放videoPlayer组件报Bug 建议官方新增小窗口画中画功能 和显示视频加载网速

在uni-app中使用videoPlayer组件时，如果遇到Bug或需要新增功能，建议你按照以下步骤进行反馈和请求：

1. Bug反馈

如果你在使用videoPlayer组件时遇到Bug，可以按照以下步骤进行反馈：

• 步骤1: 确认Bug是否可复现，记录复现步骤。
• 步骤2: 提供详细的代码片段，确保开发者能够复现问题。
• 步骤3: 提供uni-app的版本号、运行平台（H5、小程序、App等）、设备信息等。
• 步骤4: 在uni-app官方论坛或GitHub仓库中提交Issue，详细描述问题。

2. 功能建议

如果你希望官方新增小窗口画中画功能和显示视频加载网速，可以按照以下步骤进行建议：

• 步骤1: 在uni-app官方论坛或GitHub仓库中提交功能请求。
• 步骤2: 详细描述功能需求，包括：
  • 小窗口画中画功能：解释该功能的使用场景和必要性，例如在移动端或H5中用户希望同时进行其他操作时，视频可以以小窗口形式继续播放。
  • 显示视频加载网速：解释该功能的实用性，例如帮助用户了解当前视频的加载情况，优化用户体验。
• 步骤3: 提供类似功能的参考案例或其他框架/平台的支持情况，帮助开发者更好地理解需求。

3. 临时解决方案

在官方未支持这些功能之前，你可以尝试以下临时解决方案：

• 小窗口画中画功能：

  • 在H5中，可以使用原生的Picture-in-Picture API实现。例如：

    const video = document.querySelector('video');
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
    }

  • 在App中，可以使用原生插件或自定义组件实现类似功能。

• 显示视频加载网速：

  • 可以通过监听video元素的progress事件，计算当前加载的字节数和时间，估算加载速度。例如：

    const video = document.querySelector('video');
    let lastBytes = 0;
    let lastTime = Date.now();
    
    video.addEventListener('progress', () => {
      const currentBytes = video.buffered.end(0);
      const currentTime = Date.now();
      const speed = ((currentBytes - lastBytes) / (currentTime - lastTime)) * 1000; // bytes per second
      console.log(`Loading speed: ${speed} bytes/s`);
      lastBytes = currentBytes;
      lastTime = currentTime;
    });