Not able to play a large mp4 file.

[mak1986]

Be sure to search for your issue before opening a new one.

Current Behavior

Not able to play 985.1 MB mp4 video

Expected Behavior

Should be playable

Steps to Reproduce

1. Goto https://cookpete.com/react-player/
2. Paste the url: https://sofadog-cdn-content.s3.eu-west-2.amazonaws.com/stock_videos/75cb191c-b1b3-4977-970f-39c5b845c120
3. Inspect browser only 2 MB was downloaded. After that, an error occurred.
   Event {isTrusted: true, type: "error", target: video, currentTarget: video, eventPhase: 2, …} bubbles: false cancelBubble: false cancelable: true composed: false currentTarget: null defaultPrevented: false eventPhase: 0 isTrusted: true path: (19) [video, div.react-player, div.relative.block.w-full.h-full.rounded.overflow-hidden.focus:outline-none.focus:ring, div.relative.flex-shrink-0, div.flex.flex-col.rounded.shadow-lg.overflow-hidden, div.px-2, div.flex, div.py-4.flex.justify-center, div, div.w-auto.overflow-y-auto.inline-block.align-bottom.bg-white.rounded-lg.px-4.pb-4.text-left.overfl…, div.flex.items-end.justify-center.min-h-screen.pt-4.px-4.pb-20.text-center.sm:block.sm:p-0, div.fixed.z-30.inset-0.overflow-y-auto, div.flex-1.overflow-y-auto, div.flex.flex-col.h-full.h-screen.bg-gray-50, div#__next, body, html.., document, Window] returnValue: true srcElement: video target: video timeStamp: 41703.650000010384 type: "error"
   If I expand the srcElement I will see:
   error: MediaError code: 4 message: ""

Environment

• URL attempting to play: https://sofadog-cdn-content.s3.eu-west-2.amazonaws.com/stock_videos/75cb191c-b1b3-4977-970f-39c5b845c120
• Browser: Chrome Version 88.0.4324.182 (Official Build) (x86_64)
• Operating system: macOS Catelina

Other Information

Do I need to specify extra parameters for a large file?

[geniuscd]

Hello, I think you should be using CloudFront to serve your video instead of requesting it directly from S3 bucket. cloudfront will help you stream the video instead of waiting for the video to be downloaded and then play it. It's called VOD (video on demand).
In addition, it's better to always have multiple videos with different quality, 1080, 720, 480, 240, etc...
now the question is how this plugin will switch the quality according to your internet connection?

[sonisourabh]

@mak1986 have you found any workaround for this problem. I am also encountering the same issue

[ZoharLiran]

the file is no longer available but I suspect the issue was similar to what I saw as well - the format wasn't compatible and therefore the player was trying to download the file instead of playing it. Once converted to the right format everything works well.