Spaces:
Running
Running
Commit
•
d708a3a
1
Parent(s):
9b37b82
use playsInline to fix the issue on iOS
Browse files
src/app/interface/video-card/index.tsx
CHANGED
@@ -102,18 +102,25 @@ export function VideoCard({
|
|
102 |
`relative w-full`,
|
103 |
isCompact ? `w-42 h-[94px]` : `aspect-video`
|
104 |
)}>
|
105 |
-
{videoThumbnailReady && shouldLoadVideo
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
117 |
<img
|
118 |
src={videoThumbnail}
|
119 |
className={cn(
|
|
|
102 |
`relative w-full`,
|
103 |
isCompact ? `w-42 h-[94px]` : `aspect-video`
|
104 |
)}>
|
105 |
+
{videoThumbnailReady && shouldLoadVideo
|
106 |
+
? <video
|
107 |
+
// mute the video
|
108 |
+
muted
|
109 |
+
|
110 |
+
// prevent iOS from attempting to open the video in full screen, which is annoying
|
111 |
+
playsInline
|
112 |
+
|
113 |
+
ref={ref}
|
114 |
+
src={video.assetUrl}
|
115 |
+
className={cn(
|
116 |
+
`w-full h-full`,
|
117 |
+
`aspect-video`,
|
118 |
+
duration > 0 ? `opacity-100`: 'opacity-0',
|
119 |
+
`transition-all duration-500`,
|
120 |
+
)}
|
121 |
+
onLoadedMetadata={handleLoad}
|
122 |
+
|
123 |
+
/> : null}
|
124 |
<img
|
125 |
src={videoThumbnail}
|
126 |
className={cn(
|