fix: video progress bar on iOS would fail
This commit is contained in:
parent
4b7230843e
commit
3e663bd483
1 changed files with 24 additions and 3 deletions
|
|
@ -99,10 +99,10 @@
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="active && isTouchDevice"
|
v-if="active && isTouchDevice && !controlsVisible"
|
||||||
type="button"
|
type="button"
|
||||||
class="absolute inset-0 z-10"
|
class="absolute inset-0 z-10"
|
||||||
:aria-label="controlsVisible ? 'Hide controls' : 'Show controls'"
|
aria-label="Show controls"
|
||||||
@click="toggleControls"
|
@click="toggleControls"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -146,9 +146,11 @@
|
||||||
min="0"
|
min="0"
|
||||||
max="1000"
|
max="1000"
|
||||||
step="1"
|
step="1"
|
||||||
class="h-1.5 w-full accent-white opacity-55 transition-opacity hover:opacity-100"
|
class="h-1.5 w-full accent-white opacity-55 transition-opacity hover:opacity-100 seek-bar"
|
||||||
aria-label="Seek video"
|
aria-label="Seek video"
|
||||||
@input="handleSeekInput"
|
@input="handleSeekInput"
|
||||||
|
@touchstart.prevent="handleSeekTouch"
|
||||||
|
@touchmove.prevent="handleSeekTouch"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-3 flex items-center justify-end sm:order-3 sm:shrink-0">
|
<div class="order-3 flex items-center justify-end sm:order-3 sm:shrink-0">
|
||||||
|
|
@ -740,6 +742,18 @@ function handleSeekInput(event: Event) {
|
||||||
showControls();
|
showControls();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleSeekTouch(event: TouchEvent) {
|
||||||
|
const target = event.currentTarget as HTMLInputElement | null;
|
||||||
|
const touch = event.touches[0];
|
||||||
|
if (!target || !touch || !videoElement.value || !duration.value) return;
|
||||||
|
|
||||||
|
const rect = target.getBoundingClientRect();
|
||||||
|
const fraction = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
|
||||||
|
videoElement.value.currentTime = fraction * duration.value;
|
||||||
|
syncVideoState();
|
||||||
|
showControls();
|
||||||
|
}
|
||||||
|
|
||||||
function handleVolumeInput(event: Event) {
|
function handleVolumeInput(event: Event) {
|
||||||
const target = event.target as HTMLInputElement | null;
|
const target = event.target as HTMLInputElement | null;
|
||||||
if (!target || !videoElement.value) return;
|
if (!target || !videoElement.value) return;
|
||||||
|
|
@ -887,6 +901,9 @@ function syncFullscreenState() {
|
||||||
isFullscreen.value = Boolean(
|
isFullscreen.value = Boolean(
|
||||||
fullscreenElement && playerContainer.value && fullscreenElement === playerContainer.value,
|
fullscreenElement && playerContainer.value && fullscreenElement === playerContainer.value,
|
||||||
);
|
);
|
||||||
|
if (!isFullscreen.value && isTouchDevice.value) {
|
||||||
|
showControls();
|
||||||
|
}
|
||||||
scheduleAssLayoutRefresh();
|
scheduleAssLayoutRefresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1284,4 +1301,8 @@ onBeforeUnmount(() => {
|
||||||
.share-video-element::-webkit-media-controls-fullscreen-button {
|
.share-video-element::-webkit-media-controls-fullscreen-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.seek-bar {
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue