Plyr

Question

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

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

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

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

这里是link代码笔来说明这个问题：https://codepen.io/dophuong/pen/mdbqRox

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});

Answer 1

我找到了这个问题的解决方案，我用 RangeTouch 修复了它

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"]', {});

我修复了它：https://codepen.io/dophuong/pen/mdbqRox

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

Plyr - Seeking does not work with custom HTML on audio element in IOS

php

jquery

ios