uni-app希望有音频视频的自动播放案例

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

uni-app希望有音频视频的自动播放案例

希望有音频 视频 的自动

innerAudioContext.autoplay = true;  
innerAudioContext.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';  
innerAudioContext.onPlay(() => {  
console.log('开始播放');  
});  
innerAudioContext.onError((res) => {  
console.log(res.errMsg);  
console.log(res.errCode);  
});  
使用无效

1 回复

当然,针对uni-app中实现音频和视频自动播放的需求,可以通过使用<audio><video>标签并结合相关属性来实现。以下是一个简单的案例,展示如何在uni-app中自动播放音频和视频。

自动播放音频示例

pages/audio/audio.vue文件中:

<template>
  <view>
    <audio
      id="audio"
      src="/static/audio/sample.mp3"
      autoplay
      loop
      @play="onAudioPlay"
      @pause="onAudioPause"
      @ended="onAudioEnded"
    ></audio>
  </view>
</template>

<script>
export default {
  methods: {
    onAudioPlay() {
      console.log('Audio is playing');
    },
    onAudioPause() {
      console.log('Audio is paused');
    },
    onAudioEnded() {
      console.log('Audio has ended');
    }
  },
  onLoad() {
    // Optional: Programmatically play audio (if autoplay is blocked)
    const audioCtx = uni.createInnerAudioContext();
    audioCtx.src = '/static/audio/sample.mp3';
    audioCtx.autoplay = true;
    audioCtx.onPlay(() => {
      console.log('Audio played programmatically');
    });
    audioCtx.onError((err) => {
      console.error('Audio error:', err);
    });
  }
};
</script>

自动播放视频示例

pages/video/video.vue文件中:

<template>
  <view>
    <video
      id="video"
      src="/static/video/sample.mp4"
      autoplay
      muted
      loop
      controls
      @play="onVideoPlay"
      @pause="onVideoPause"
      @ended="onVideoEnded"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onVideoPlay() {
      console.log('Video is playing');
    },
    onVideoPause() {
      console.log('Video is paused');
    },
    onVideoEnded() {
      console.log('Video has ended');
    }
  },
  onLoad() {
    // Note: Some browsers/platforms may block autoplay without muting
    // Optional: Programmatically play video (if autoplay is blocked)
    const videoCtx = uni.createVideoContext('video');
    videoCtx.play();
    videoCtx.onError((err) => {
      console.error('Video error:', err);
    });
  }
};
</script>

注意事项

  1. 自动播放策略:部分浏览器和移动平台(如iOS Safari)可能默认阻止未静音的自动播放。因此,对于视频,通常需要将muted属性设置为true来确保自动播放生效。
  2. 资源路径:确保音频和视频文件的路径正确,并且文件已被正确放置在项目的静态资源目录中。
  3. 兼容性:不同平台对自动播放的支持可能有所不同,实际开发中需要进行充分的测试。

以上代码展示了如何在uni-app中实现音频和视频的自动播放,并包含了一些基本的事件处理逻辑。

回到顶部