React.js

  Désolé, cette page est en attente de traduction en français

Example of a simple React application with player integration. The script is loaded with a hook (useEffect) and then initialized to the container.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Player from "./Player";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App/>
    <Player id="player" file="https://plrjs.com/sample.mp4"/>
  </React.StrictMode>,
  rootElement
);

App.js

import { React, useEffect } from "react";
export default function App() {
  useScript("https://site.com/playerjs.js");
  return (
    <div className="App">
    <h1>Hello PlayerJS</h1>
    <input type="button" value="Play a new video" onClick={PlayNewVideo} />
    <div id="player"></div>
    </div>
  );
}

function useScript(url) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
}

function PlayNewVideo() {
  if (window.pljssglobal.length > 0) {
    window.pljssglobal[0].api("play", "https://plrjs.com/new.mp4");
  }
}

The PlayNewVideo function shows how to launch a new link in the player via the API.

Player.js

export default function Player(config) {
  CreatePlayer(config);
  return "";
}

function CreatePlayer(config) {
  if (window.Playerjs) {
    new window.Playerjs(config);
  } else {
    if (!window.pjscnfgs) {
      window.pjscnfgs = {};
    }
    window.pjscnfgs[config.id] = config;
  }
}

window.PlayerjsAsync = function () {
  if (window.pjscnfgs) {
    Object.entries(window.pjscnfgs).map(([key, value]) => {
      return new window.Playerjs(value);
    });
  }
  window.pjscnfgs = {};
};

19.12.2
2024 © PlayerJS

S'inscrire gratuitement

S'inscrire
En vous inscrivant, vous acceptez les Termes de service
Login si vous avez un compte.

Restaurer le mot de passe

Restaurer
Vous avez oublié votre adresse électronique ? Contactez-nous