uni-app video组件播放1秒左右mp3音频无声音问题，直接自动播放或只调用一次播放无声

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

uni-app video组件播放1秒左右mp3音频无声音问题，直接自动播放或只调用一次播放无声

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Win11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 15
手机机型 中兴Z50Rs
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
<view>  
<view class="uni-padding-wrap uni-common-mt">  
<view>  
<video id="myVideo" src="/static/music/zongyi/chijing.mp3" @error="videoErrorCallback"  
danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
<!-- #ifndef MP-ALIPAY -->
<view class="uni-list uni-common-mt">
    <view class="uni-list-cell">
        <view>
            <view class="uni-label">弹幕内容</view>
        </view>
        <view class="uni-list-cell-db">
            <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
        </view>
    </view>
</view>
<view class="uni-btn-v">
    <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
</view>
<!-- #endif -->
</view>
</view>
</template>  

<script>
export default {
data() {
return {
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
sendDanmu: function() {
// this.videoContext.sendDanmu({
//     text: this.danmuValue,
//     color: this.getRandomColor()
// });
// this.danmuValue = '';
//  这里我设置了500毫秒演示，模拟连续点二次播放，是可以的，只调用一次无法出声音
setTimeout(() => {
this.videoContext.play()
}, 500);
this.videoContext.play()
}
},
videoErrorCallback: function(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
getRandomColor: function() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
</script>  

<style scoped>
</style>

操作步骤：

运行以上代码

预期结果：

能自动播放成功，或者调用一次play就可以正常播放

实际结果：

必须要点二次播放才可以正常播放一次，第三次依然失败。

bug描述：

【报Bug】video组件，时长大概在1秒左右的mp3音频，直接自动播放或者只调用一次播放会没有声音，时长稍微长一点的mp3就比较正常，但是末尾也没完全办法播放结束。


Harmonyos Next教程
1 回复

针对你提到的uni-app中video组件播放1秒左右mp3音频无声的问题，这通常是由于video组件主要用于视频播放，而在处理音频文件时可能存在一些兼容性和行为上的差异。虽然video组件可以播放音频文件，但更好的实践是使用audio组件来播放音频文件，因为audio组件专为音频设计，通常具有更好的兼容性和行为表现。

下面是一个使用audio组件来播放音频文件的示例代码：

<template>
  <view>
    <audio
      ref="audio"
      :src="audioSrc"
      autoplay
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @error="onError"
    ></audio>
    <button @click="playAudio">播放音频</button>
    <button @click="pauseAudio">暂停音频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'https://example.com/path/to/your/audiofile.mp3' // 替换为你的音频文件URL
    };
  },
  methods: {
    playAudio() {
      this.$refs.audio.play();
    },
    pauseAudio() {
      this.$refs.audio.pause();
    },
    onPlay() {
      console.log('音频开始播放');
    },
    onPause() {
      console.log('音频暂停');
    },
    onEnded() {
      console.log('音频播放结束');
    },
    onError(e) {
      console.error('音频播放出错:', e);
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个示例中，我们使用了audio组件来播放音频文件，并提供了播放和暂停按钮来控制音频的播放。同时，通过监听play、pause、ended和error事件，我们可以处理音频播放的各种状态。

如果你的应用场景确实需要使用video组件来播放音频（例如，为了显示与音频同步的视频画面，但视频内容实际上为透明或黑屏），你可能需要检查以下几点：

  1. 确保音频文件的格式和编码是video组件所支持的。
  2. 检查是否有浏览器或平台的限制，导致自动播放策略阻止了音频的播放。
  3. 尝试在video组件上设置muted属性为false（尽管这通常用于视频），并检查是否影响音频的播放。

然而，对于纯音频播放，推荐使用audio组件，以避免潜在的问题和提高兼容性。

回到顶部