uni-app中有没有遇到在两个页面引入插件，只要一个页面播放了，另一个页面打开就会被自动暂停

发布于 1周前 作者 yibo5220 来自 uni-app

uni-app中有没有遇到在两个页面引入插件，只要一个页面播放了，另一个页面打开就会被自动暂停
我现在有两个页面使用了组件，第一个使用播放视频后，暂停跳转到令一个页面再加载该组件播放视频后，视频播放两秒就会被自动暂停，是为社么

Harmonyos Next教程
2 回复

提供一个单页面源码，说明 vue 版本、HBuilderX 依赖版本、运行的平台


在uni-app中，如果两个页面都引入了同一个插件（比如音频或视频播放插件），并且你希望在一个页面播放时，另一个页面打开时自动暂停，这通常需要在页面生命周期中进行适当的控制。以下是一个使用uni-app和HTML5 Audio API的示例，展示了如何实现这种功能。

假设我们有一个音频播放插件，并且我们在两个页面page1和page2中都引入了它。

1. 插件封装（假设为AudioPlayer.vue）

首先，我们创建一个简单的音频播放组件AudioPlayer.vue：

<template>
  <view>
    <button @click="playAudio">Play Audio</button>
    <button @click="pauseAudio">Pause Audio</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audio: null
    };
  },
  methods: {
    playAudio() {
      this.audio = new Audio('/path/to/your/audio.mp3');
      this.audio.play();
    },
    pauseAudio() {
      if (this.audio) {
        this.audio.pause();
      }
    }
  },
  onUnload() {
    // 页面卸载时，暂停音频
    if (this.audio) {
      this.audio.pause();
    }
  }
};
</script>

2. 页面1（page1.vue）

在page1.vue中引入并使用AudioPlayer组件：

<template>
  <view>
    <AudioPlayer ref="audioPlayer1" />
  </view>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer.vue';

export default {
  components: {
    AudioPlayer
  }
};
</script>

3. 页面2（page2.vue）

在page2.vue中也引入并使用AudioPlayer组件，但我们需要确保在onLoad生命周期中暂停前一个页面的音频（如果可能）。由于uni-app的页面间通信有限，这里假设我们有一个全局的音频控制（可以通过Vuex或者全局事件总线实现）：

<template>
  <view>
    <AudioPlayer ref="audioPlayer2" />
  </view>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer.vue';

export default {
  components: {
    AudioPlayer
  },
  onLoad() {
    // 假设我们有一个全局方法或变量来控制前一个页面的音频
    if (this.$refs.audioPlayer1 && this.$refs.audioPlayer1.audio) {
      this.$refs.audioPlayer1.audio.pause();
    } else {
      // 或者通过全局事件总线/Vuex等方式来通知前一个页面暂停音频
    }
  }
};
</script>

注意：上述代码示例假设你能直接访问另一个页面的组件实例，这在uni-app中通常是不可能的。实际实现中，你可能需要使用Vuex、全局事件总线或其他跨页面通信方法来控制音频播放状态。

回到顶部