uni-app中video组件的src属性动态绑定在App端不生效

good

在uni-app中，如果你发现video组件的src属性在App端动态绑定不生效，这通常是由于一些常见的绑定或生命周期问题导致的。下面是一个完整的示例代码，展示如何在uni-app中正确动态绑定video组件的src属性，并确保在App端能够正常播放视频。

首先，确保你的项目结构中有视频资源，或者你的视频URL是有效的。这里我们假设有一个本地视频资源和一个在线视频URL。

1. 在页面的<template>部分

<template>
  <view>
    <button @click="toggleVideo">切换视频</button>
    <video
      :src="videoSrc"
      controls
      autoplay
      style="width: 100%; height: 300px;"
    ></video>
  </view>
</template>

2. 在页面的<script>部分

<script>
export default {
  data() {
    return {
      // 初始视频源，可以是本地路径或在线URL
      videoSrc: '/static/local-video.mp4', // 本地视频示例路径
      isOnline: false // 标记当前播放的是本地视频还是在线视频
    };
  },
  methods: {
    toggleVideo() {
      // 切换视频源
      this.isOnline = !this.isOnline;
      if (this.isOnline) {
        this.videoSrc = 'https://www.example.com/online-video.mp4'; // 在线视频URL示例
      } else {
        this.videoSrc = '/static/local-video.mp4'; // 本地视频路径
      }
    }
  },
  mounted() {
    // 如果有需要，可以在页面挂载后进行一些初始化操作
    console.log('Video component mounted with initial src:', this.videoSrc);
  }
};
</script>

3. 在页面的<style>部分（可选）

<style scoped>
/* 样式可以根据需要调整 */
button {
  margin-bottom: 10px;
}
</style>

注意事项

• 确保视频路径正确无误。本地视频应放在static目录下，以便uni-app正确打包。
• 在线视频URL需要是可访问的，并且没有CORS（跨源资源共享）问题。
• 如果视频切换后仍然不生效，尝试在toggleVideo方法中加入一些延时（如setTimeout），看是否是渲染时机问题，但这通常不是最佳实践，仅作为调试手段。
• 确保App端已经正确配置了视频播放的权限（如Android的WRITE_EXTERNAL_STORAGE权限，如果视频存储在外部存储）。

通过上述代码，你应该能够在uni-app的App端实现video组件src属性的动态绑定，并正常播放视频。如果问题依旧存在，请检查控制台是否有错误信息，并根据错误信息进行进一步调试。