Video does not load
vikiival opened this issue · 16 comments
from @niklasp
nonetheless the video in epic doesnt load with correct metadata. can it be the filesize. i triple checked the metadata and its correct:
https://kodadot.xyz/ahk/gallery/105-3283225822
https://image.w.kodadot.xyz/ipfs/QmYnLFFMMviiNRW7TgMbuzPKboA4MDF7b6sM5ajJFv76XW
{
"mediaUri": "ipfs://ipfs/QmcfALNaGnYzujGiPWL2Q2PPBC7nBhr8JnT4bxFkFBH7gT",
"image": "ipfs://ipfs/Qmf1pn8Zsjk3NdgeVPufmRW68sMQH4MR5DqeSZ9UnqwD89",
"type": "video/mp4",
"animation_url": "ipfs://ipfs/QmcfALNaGnYzujGiPWL2Q2PPBC7nBhr8JnT4bxFkFBH7gT",
}
video file: https://gateway.ipfs.io/ipfs/QmcfALNaGnYzujGiPWL2Q2PPBC7nBhr8JnT4bxFkFBH7gT
Video file: https://image.w.kodadot.xyz/ipfs/QmcfALNaGnYzujGiPWL2Q2PPBC7nBhr8JnT4bxFkFBH7gT
May @preschian knows what could be an issue?
The video is surely too large (450MB), but the issue it seems here is that even the cover does not load in that case?
Kapture.2023-10-19.at.13.46.59.mp4
it loads after a long waitng time of 5 minutes. maybe in your code you are waiting for the full file to be loaded before playing it?
Also no sound for me and no controls
it loads after a long waitng time of 5 minutes. maybe in your code you are waiting for the full file to be loaded before playing it?
So maybe for us would be good to check if it's viable for us to stream the content or just use other gw
Downloaded video an it failed
checking
worker side seems fine on my end. but I only can test for several seconds in the beginning, the file size is so huge for my internet speed
that even the cover does not load in that case?
seems like cf-r2 is still processing the file to fully upload to the r2 bucket
seems like need to fix in our UI side, not loaded
oohh, thanks for the report. I just got some idea
currently, we already optimize images with https://developers.cloudflare.com/images/cloudflare-images/
for video, maybe we can use this https://developers.cloudflare.com/stream/
unable to play on safari
interesting, on safari also
unable to play on ios/safari then. related with this: #187
Have tried HLS.js? 👀
I still face so much trouble with "HLS on iOS" in my previous company. There are still some limitations on iOS. Previously use:
- https://www.wowza.com/ with HLS format (.m3u8) (I guess this is the troublemaker at that time)
- https://www.npmjs.com/package/react-player
Anyway, our infra currently has no HLS/Dash format. But, once we implement this #246, we can support the HLS/Dash format for the video.
useEffect(() => {
const videoSrc =
"https://videodelivery.net/<bucket>/manifest/video.m3u8";
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(videoRef?.current);
}
// HLS.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using HLS.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
sourceRef.current.type = "application/x-mpegURL";
videoRef.current.src = videoSrc;
videoRef.current.setAttribute("playsinline", true);
}
}, []);The problem I faced was not related to Hls.isSupported(). However, some APIs, such as PIP, custom playback buttons, and play/resume, could have been more stable than Android. But it can related to the provider I've been using. At that time, I'm using Wowza. If you see this, there are still some new issues on iOS https://github.com/cookpete/react-player/issues?q=ios
Anyway, once we had cf-stream, I preferred to test a built-in player from CF first: https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/
unable to play on safari
anyway, it works without HLS
https://deploy-preview-8171--koda-canary.netlify.app/ahp/gallery/10-29
unable to play on safari
kodadot.xyz/ahp/gallery/10-24anyway, it works without HLS
https://deploy-preview-8171--koda-canary.netlify.app/ahp/gallery/10-29
It will not work with HLS?