I use Capacitor with ReactJS and use the HTML Video Element to play video embedded.
Sometimes on IOS it loads the videos perfectly, but sometimes it shows nothing.
It doesn’t throw any errors or calls the error events of the Video Element.
I download the file with this Code:
Filesystem.downloadFile({
url: url,
path: filename,
directory: Directory.Cache,
});
I check if the file already exists before with this:
Filesystem.stat({
path: filename,
directory: Directory.Cache,
});
And I use this to get the video url:
Filesystem.getUri({
directory: Directory.Cache,
path: `video-${data.media_id}.mp4`,
}).then((getUriResult) => {
const path = getUriResult.uri;
const src = Capacitor.convertFileSrc(path);
setCachedVideoData(src);
});
And this is my Video Element:
{cachedVideoData && (
<video
src={cachedVideoData}
ref={videoRef}
poster={data.media_thumbnail}
className="h-[calc(calc(100vh-50px)-env(safe-area-inset-bottom))] mx-auto"
css={[
videoRef.current &&
videoRef.current?.videoWidth / videoRef.current?.videoHeight <
0.57 &&
tw`object-cover`,
]}
loop={true}
muted={muted}
playsInline={true}
autoPlay={active}
onCanPlayThrough={() => {
setOnCanPlay(true);
}}
onTimeUpdate={() => {
if (!videoRef.current) return;
setTimeRatio(
(videoRef.current?.currentTime / videoRef.current?.duration) *
100,
);
}}
/>
)}