uni-app动态切换video的src，视频黑屏不播放

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app动态切换video的src，视频黑屏不播放

操作步骤：

  • 安卓7的系统，先给video标签的src一个初始的视频连接，可以正常播放，动态切换成另一个url直接黑屏了

预期结果：

  • 正常播放新的视频链接

实际结果：

  • 视频组件黑屏，不播放了

bug描述：

  • 动态切换video标签的src，黑屏，不播放了
Harmonyos Next教程
7 回复

感谢反馈，这个你测试了多少设备，安卓模拟器是否正常，ios 设备是否正常，经过你测试和当前这台机器有关系，还是和安卓 7 有关系，还是都有问题，不是兼容性的关系？


测试了三台设备，一个安卓7的模拟器，两台安卓7的电视，都有这个问题，另外测了一台安卓9的电视和模拟器，安卓9没有发现这个问题，ios没有测试过

回复 1***@qq.com: 我使用你给的案例，在 Vue2+ HBuilderX alpha 最新版，测试安卓 14 没有复现黑屏的情况。怀疑是兼容问题，你尝试给 video 的父元素设置 v-if 切换一下试试，看是否可以绕过。我没有复现你的问题，所以不能进一步排查

回复 DCloud_UNI_OttoJi: 应该是只有安卓7以下的设备会有这种问题，另外我尝试过使用v-if去切换视频组件，但是会触发另一个问题，两个视频组件不断的销毁重建会使内存不断升高，最后导致应用崩溃卡死。参考：https://ask.dcloud.net.cn/question/198855

回复 1***@qq.com: 好，关联的帖子我转给相关同事了，细节在这个帖子里更新。现在有绕过方案吗，简单地通过停止播放再销毁是否可以缓解。如果是安卓 7 有问题，针对不同系统编写逻辑绕过是否解决了你的问题

<template> <view> <button @click='handleChange'>切换url</button> </view> </template> <script> export default { data() { return { index: 0, url: 'https://zxinfo.oss-cn-hangzhou.aliyuncs.com/20241125/202411251032166397.4.mp4', urls: [ 'https://zxinfo.oss-cn-hangzhou.aliyuncs.com/20241125/202411251032166397.4.mp4', 'https://zxinfo.oss-cn-hangzhou.aliyuncs.com/20241116/202411161935093569.mp4' ] } }, methods: { handleChange() { this.index = this.index == 0? 1 : 0 this.url = this.urls[this.index] } } } </script> <style> </style>

在uni-app中动态切换<video>组件的src属性时，如果遇到视频黑屏不播放的问题，通常是因为视频组件的重新加载和渲染没有正确处理。以下是一个示例代码，展示如何在uni-app中动态切换<video>组件的src，并确保视频能够正常播放。

首先，确保你的页面或组件中有以下结构：

<template>
  <view>
    <button @click="changeVideo">切换视频</button>
    <video
      id="myVideo"
      :src="videoSrc"
      controls
      autoplay
      @loadedmetadata="onLoadedMetadata"
      @error="onError"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video1.mp4', // 初始视频URL
      videoList: [
        'https://example.com/video1.mp4',
        'https://example.com/video2.mp4',
        // 更多视频URL
      ],
      currentIndex: 0,
    };
  },
  methods: {
    changeVideo() {
      this.currentIndex = (this.currentIndex + 1) % this.videoList.length;
      this.videoSrc = this.videoList[this.currentIndex];
      this.reloadVideo();
    },
    reloadVideo() {
      const videoElement = this.$refs.myVideo;
      if (videoElement) {
        // 暂停当前视频
        videoElement.pause();
        // 重置视频
        videoElement.currentTime = 0;
        // 强制重新加载视频
        videoElement.load();
        // 尝试自动播放（某些平台可能不支持autoplay）
        videoElement.play().catch(err => {
          console.error('视频自动播放失败:', err);
        });
      }
    },
    onLoadedMetadata() {
      console.log('视频元数据加载完成');
    },
    onError(e) {
      console.error('视频播放出错:', e.detail);
    },
  },
  mounted() {
    // 确保video组件有ref引用
    this.$nextTick(() => {
      this.$refs.myVideo = this.$el.querySelector('#myVideo');
    });
  },
};
</script>

在这个示例中，我们通过点击按钮来切换视频src。切换后，调用reloadVideo方法来处理视频的重新加载。关键步骤包括：

  1. 暂停当前播放的视频。
  2. 重置视频的当前时间到0。
  3. 调用load方法强制浏览器重新加载视频资源。
  4. 尝试调用play方法自动播放视频（注意，某些平台或浏览器可能不支持autoplay）。

注意，由于uni-app的跨平台特性，某些方法在特定平台上可能表现不一致。如果在某些平台上遇到自动播放问题，可以考虑使用用户交互（如点击按钮）来触发播放。

回到顶部