React.js
Przepraszamy, ta strona oczekuje na tłumaczenie na język polski
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 = {};
};