Video does not load when importing FilePlayer specifically

[TTiole]

Current Behavior

Video is not loading

Expected Behavior

Video should load

Steps to Reproduce

1. Import the fileplayer specifically
2. Use backend endpoint as URL which returns the video contents

Environment

• URL attempting to play: It's an endpoint, not something that would work even if I shared
• Browser: Firefox
• Operating system: Win 10

Other Information

Basically, if the endpoint is entered directly on the video, it works fine. If the endpoint is passed to the general ReactPlayer import ReactPlayer from 'react-player', it actually works.

The issue comes when I specifically import the file player (import ReactPlayer from 'react-player/file'). If I do ReactPlayer.canPlay false is returned, but also nothing gets passed to the onError callback or anything.

[CanTheAlmighty]

Experiencing the same issue, I switched to react-player/file attempting to reduce the webpack bundle size but ended up discovering this same issue.

Not only the video doesn't load, it doesn't even render anything.

[lora-thomason-ne]

I'm seeing this same issue.

Looking at the code, when using the full reactPlayer there is a fallback to use the file player if it can't find a match for the url. When using the file player directly, it's failing because the url doesn't match any of the file patterns checked in canPlay.

In my case I have video files uploaded to a DAM that doesn't serve the assets with a file extension.

I guess if you want to go crazy, you could work around it like this:

// VideoFilePlayer.js

import { createReactPlayer } from 'react-player/lib/ReactPlayer';
import { FilePlayer } from 'react-player/lib/players/FilePlayer';

const VideoFilePlayer = createReactPlayer([{
  key: 'file',
  canPlay: () => true, // bypass tests
  lazyPlayer: FilePlayer,
}]);

export default VideoFilePlayer;

// usage
import VideoFilePlayer from './VideoFilePlayer'

<VideoFilePlayer url={`${videoSrc}`} playing={isActive} muted />

[sampsonjoliver]

Also having this problem, especially since Vimeo has changed the structure of their direct-file video links to follow a format of https://player.vimeo.com/.../<video-id>/.../720p, without the .mp4 extension they've previously used.

I also came to the same solution posted by @lora-thomason-ne above.