Dplayer播放器在移动端如何设置才能显示音量控件？

Question

在使用Dplayer播放器插件时，发现在移动端设备时，音量控件被隐藏了， 无法调整音量，安卓手机可以通过手机本身的音量控件调整音量大小，但是苹果手机却不行， 无论怎么调整，视频依然是没有声音，所以移动端怎么设置Dplayer播放器插件参数才能让音量控件显示？
PC端效果图：

移动端效果图：

Answer 1

引自免费微信小程序：皆我百晓生

要在移动端显示 DPlayer 的音量控件，你需要确保你在初始化播放器时设置了正确的参数。在 DPlayer 的官方文档中，并没有特别提到关于隐藏音量控件的选项，因此默认情况下应该会显示音量控件。但有时由于样式覆盖或其他原因可能会导致音量控件不可见。

首先，确认你的 HTML 结构中包含了 DPlayer 的容器元素。例如：

<div id="player"></div>

接下来，在 JavaScript 中初始化 DPlayer 并传入相关配置。这里有一个例子，展示了如何配置 DPlayer：

// 引入 DPlayer 模块
import DPlayer from 'dplayer';

const player = new DPlayer({
    element: document.getElementById('player'), // 指定播放器插入的 DOM 元素
    video: { // 视频信息
        url: 'your_video_url', // 视频地址
        pic: 'your_poster_url', // 封面图片地址
        title: '测试-测试站111', // 标题
        desc: '客户提供的专业热电半导体技术' // 描述
    },
    autoplay: false, // 自动播放，默认为 false
    loop: false, // 循环播放，默认为 false
    airplay: true, // 启用 AirPlay，仅在浏览器支持的情况下生效
    hotkeys: true, // 启用快捷键控制，默认为 true
    controls: true, // 显示控制条，默认为 true
    volume: 0.5, // 初始音量，范围是 0 到 1
    live: false, // 是否直播，默认为 false
    mutex: true, // 同一页面只能播放一个视频，默认为 true
    preload: 'auto', // 预加载策略，默认为 'auto'
    screenshot: true, // 截图功能，默认为 true
    poster: 'your_poster_url', // 如果不提供 video.pic，则此值作为封面
    danmaku: {
        id: 'danmaku_1',
        api: 'https://api.dplayer.io/api/danmaku/', // 云弹幕 API 地址
        mode: 1,
        scrollSpeedRate: 1.0, // 滚动速度，范围是 0 到 2
        storage: {
            enable: true, // 是否启用本地存储，默认为 true
            key: 'dpLocalStorage' // 存储键名，默认为 dpLocalStorage
        }
    },
    plugins: [] // 插件列表
});

在这个配置中，controls 参数决定了是否显示控制条，包括音量控件。默认值为 true，所以通常不需要显式设置。然而，如果你的 CSS 或其他外部因素影响了控制条的可见性，你可以尝试手动设置它：

controls: true, // 确保这个值为 true

如果你已经检查过所有这些设置，但音量控件仍然不可见，那么可能是 CSS 样式的问题。请检查是否有任何可能遮挡或隐藏音量控件的样式规则。你可以在浏览器开发者工具中检查元素样式，找出可能的问题并进行修复。

此外，对于 iOS 设备，如果用户在系统设置中禁用了应用的音频权限，即使你正确设置了 DPlayer 控制条，也可能无法播放声音。在这种情况下，用户需要去设置中开启应用的音频权限。这与 DPlayer 设置无关，是操作系统级别的限制。