mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add compatibility for video on Safari

Browse Source
This commit is contained in:
codytseng
2025-04-13 12:10:58 +08:00
parent 92fe2524e5
commit 015932a198
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/VideoPlayer/index.tsx
View File

@@ -24,9 +24,9 @@ export default function VideoPlayer({
if (!video || !container) return if (!video || !container) return
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
async ([entry]) => { ([entry]) => {
if (!entry.isIntersecting && !video.paused) { if (!entry.isIntersecting && !video.paused) {
await videoManager.enterPiP(video) videoManager.enterPiP(video)
} }
}, },
{ threshold: 0.5 } { threshold: 0.5 }
@@ -51,7 +51,8 @@ export default function VideoPlayer({
<video <video
ref={videoRef} ref={videoRef}
controls controls
className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)} playsInline
className={cn('rounded-lg', size === 'small' ? 'max-h-[30vh]' : 'max-h-[50vh]', className)}
src={src} src={src}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onPlay={handlePlay} onPlay={handlePlay}

33
src/services/video-manager.service.ts
View File

@@ -10,24 +10,37 @@ class VideoManagerService {
return VideoManagerService.instance return VideoManagerService.instance
} }
async enterPiP(video: HTMLVideoElement) { enterPiP(video: HTMLVideoElement) {
if (this.currentVideo && this.currentVideo !== video) { if (this.currentVideo && this.currentVideo !== video) {
await this.exitPiP(this.currentVideo) this.exitPiP(this.currentVideo)
} }
if ('requestPictureInPicture' in video) { if (
await video.requestPictureInPicture() (video as any).webkitSupportsPresentationMode &&
} else if ('webkitSetPresentationMode' in video) { typeof (video as any).webkitSetPresentationMode === 'function'
) {
;(video as any).webkitSetPresentationMode('picture-in-picture') ;(video as any).webkitSetPresentationMode('picture-in-picture')
setTimeout(() => {
if ((video as any).webkitPresentationMode !== 'picture-in-picture') {
video.pause()
}
}, 10)
} else {
video.requestPictureInPicture().catch(() => {
video.pause()
})
} }
} }
async exitPiP(video: HTMLVideoElement) { private exitPiP(video: HTMLVideoElement) {
video.pause() video.pause()
if (document.pictureInPictureElement === video) { if (
await document.exitPictureInPicture() (video as any).webkitSupportsPresentationMode &&
} else if ('webkitSetPresentationMode' in video) { typeof (video as any).webkitSetPresentationMode === 'function'
) {
;(video as any).webkitSetPresentationMode('inline') ;(video as any).webkitSetPresentationMode('inline')
} else {
document.exitPictureInPicture()
} }
if (this.currentVideo === video) { if (this.currentVideo === video) {
@@ -37,7 +50,7 @@ class VideoManagerService {
async playVideo(video: HTMLVideoElement) { async playVideo(video: HTMLVideoElement) {
if (this.currentVideo && this.currentVideo !== video) { if (this.currentVideo && this.currentVideo !== video) {
await this.exitPiP(this.currentVideo) this.exitPiP(this.currentVideo)
} }
this.currentVideo = video this.currentVideo = video
video.play() video.play()