uni-app iOS视频播放器音量调节和系统不同步

uni-app iOS视频播放器音量调节和系统不同步

开发环境 版本号 项目创建方式
Mac 12.0.1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.2.12

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iPhoneX等所有苹果设备

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<video id='video1' class="video" :src="src" autoplay="false" duration="" controls="true" :danmu-list="list"
danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90"
show-mute-btn="true" [@play](/user/play)="onstart" [@pause](/user/pause)="onpause" [@ended](/user/ended)="onfinish" [@error](/user/error)="onfail" [@waiting](/user/waiting)="waiting"
[@timeupdate](/user/timeupdate)="timeupdate" [@fullscreenchange](/user/fullscreenchange)="fullscreenchange"></video>

更多关于uni-app iOS视频播放器音量调节和系统不同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

软件音量和系统音量本来不就是2套音量系统吗?这也是BUG?

更多关于uni-app iOS视频播放器音量调节和系统不同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html


手势那个设置为false 确实是bug iOS 下个版本修复

亲，vslide-gesture-in-fullscreen 设置为false这个bug，3.3.3.20211225好像还没修复，是准备哪个版本修复呢，我们正好遇到了这个问题

回复 8***@qq.com: 还没修复 正在改

在uni-app中，iOS端视频播放器的音量控制确实存在与系统音量不同步的问题。这是因为iOS系统的限制导致的。

主要原因： iOS系统的音量控制分为媒体音量和铃声/通知音量两个独立通道。uni-app的video组件在iOS上默认使用媒体音量通道，而物理按键调节的是系统媒体音量，但组件内部可能没有实时同步这个变化。

解决方案：

  1. 使用plus.audio.createPlayer（推荐） 对于需要精确控制音量的场景，建议使用HTML5+ API：

    // 创建音频播放器
const audioPlayer = plus.audio.createPlayer('path/to/video.mp4');
audioPlayer.play();

// 设置音量（0.0-1.0）
audioPlayer.setVolume(0.5);

// 监听音量按键
document.addEventListener('volumechange', function() {
    // 获取系统音量并同步
});

  2. 监听音量按键事件 通过监听音量按键事件来手动同步：

    // 在页面中监听音量变化
onLoad() {
    if (uni.getSystemInfoSync().platform === 'ios') {
        document.addEventListener('volumechange', this.onVolumeChange);
    }
},
methods: {
    onVolumeChange() {
        // 获取当前系统音量并应用到video
        // 注意：iOS限制无法直接获取系统音量值
    }
}

  3. 自定义音量控制UI 完全使用自定义的音量控制，避免依赖系统同步：

    <template>
  <video :volume="customVolume" @volumechange="onVolumeChange"></video>
  <slider :value="customVolume" @change="setVolume"/>
</template>
回到顶部