Giters

chintan9 / plyr-react

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo

Home Page:https://github.com/chintan9/plyr-react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple players not working

bosbode opened this issue · comments

commented

When mapping through multiple items, all with their own player. Only one player loads the rest stay blank.

commented

Thanks for your report @bosbode,
Could you please reproduce the scenario in a code sandbox, so we can discuss it further in the frozen environment and update you with the changes?

commented

Hi @realamirhe thanks for the reply. Here's the sandbox https://codesandbox.io/s/elated-faraday-3r194i
In the sandbox the players load the posters, but when you press play nothing happens. When loading a single video from the json file it works as expected.

commented

hey @bosbode, the problem seems to exist because of SSR issue.

The Plyr should interact with the dom, and the way it should be used is something like this

We might make a helper wrapper for the SSR support to try to load the package only to the client.

Also, I made a NextJs version of your code sandbox in our example director (example/nextjs)
and try to load it on the client-side via the next dynamic but it didn't behave as expected

There is also a react version of exact same things, which let you interact with all of the videos
(example/react/video-list)

commented

Hey @realamirhe, thanks for the looking into it. I've fixed by using the normal PLYR package. https://codesandbox.io/s/frosty-cache-6j67ms

import Head from "next/head";
import Plyr from "plyr";
import { useEffect } from "react";
import { videos } from "../content.json";

export default function IndexPage() {
 useEffect(() => {
   const players = Plyr.setup(".video");
 }, []);

 return (
   <div>
     <Head>
       <link href="https://cdn.plyr.io/3.7.2/plyr.css" rel="stylesheet" />
     </Head>
     {videos.map((video) => (
       <div
         key={video.id}
         className="video"
         data-plyr-provider={video.source}
         data-plyr-embed-id={video.id}
       />
     ))}
   </div>
 );
}
commented

Nice to hear that
So I'm going to close the issue, feel free to open a new one if it remains.