Php Plyr-Seeking不适用于IOS中音频元素上的自定义HTML

我使用自定义HTML控件创建了一个plyr音频实例

预期结果：音频播放器试图触摸输入范围的一部分

问题：音频播放器短暂暂停，无法在IOS safari中搜索

测试环境： 操作系统：iOS 版本：12

下面是显示此问题的链接代码笔：

---

我找到了解决这个问题的办法，我过去常把它修好

const controls = '
      <div class="plyr__controls">
                    <button type="button" class="plyr__controls__item plyr__control" aria-label="Play" data-plyr="play">
                            <svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-pause"></use></svg>
                            <svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-play"></use></svg>
                            <span class="label--pressed plyr__sr-only">Pause</span>
                            <span class="label--not-pressed plyr__sr-only">Play</span>
                    </button>
                    <div class="plyr__controls__item plyr__progress__container">
                            <div class="plyr__progress">
                                    <input data-plyr="seek" class="plyr__progress--seek" type="range" min="0" max="100" step="0.01" value="0" autocomplete="on" role="slider" aria-label="Seek" id="plyr-seek-{id}" aria-valuemin="0" style="user-select: none; touch-action: manipulation;">
                                    <progress class="plyr__progress__buffer" min="0" max="100" value="0" role="progressbar">% buffered</progress>
                                    <span role="tooltip" class="plyr__tooltip">00:00</span>
                            </div>
                    </div>
            </div>
      ';

const player = new Plyr('#player', {controls});
const ranges = RangeTouch.setup('input[type="range"]', {});

---

我在中修复了它：

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅如何寻求帮助页面，以澄清此问题：谢谢@borchvm！我的意思是，当我创建了一个带有自定义控件的plyr音频实例时，音频播放器会短暂暂停，不会在IOS safari中搜索，但我希望音频播放器会搜索部分输入范围。这是查看此问题的链接

const controls = '
      <div class="plyr__controls">
                    <button type="button" class="plyr__controls__item plyr__control" aria-label="Play" data-plyr="play">
                            <svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-pause"></use></svg>
                            <svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-play"></use></svg>
                            <span class="label--pressed plyr__sr-only">Pause</span>
                            <span class="label--not-pressed plyr__sr-only">Play</span>
                    </button>
                    <div class="plyr__controls__item plyr__progress__container">
                            <div class="plyr__progress">
                                    <input data-plyr="seek" class="plyr__progress--seek" type="range" min="0" max="100" step="0.01" value="0" autocomplete="on" role="slider" aria-label="Seek" id="plyr-seek-{id}" aria-valuemin="0" style="user-select: none; touch-action: manipulation;">
                                    <progress class="plyr__progress__buffer" min="0" max="100" value="0" role="progressbar">% buffered</progress>
                                    <span role="tooltip" class="plyr__tooltip">00:00</span>
                            </div>
                    </div>
            </div>
      ';

const player = new Plyr('#player', {controls});
const ranges = RangeTouch.setup('input[type="range"]', {});