0.2.2 • Published 2 months ago
interactive-react-player v0.2.2
Setup instructions
- Install the npm package
npm install interactive-react-player
- Use the below boilerplate react code as a reference to setup the interactive component
import React from "react";
import { InteractivePlayer } from "interactive-react-player";
import axios from "axios";
const App = () => {
const [videoData, setVideoData] = React.useState({});
const [canvasWidth, setCanvasWidth] = React.useState(window.innerWidth);
const [canvasHeight, setCanvasHeight] = React.useState(window.innerHeight);
const params = {
url: process.env.VIDEO_URL,
key: process.env.API_KEY,
};
const apiUrl: any = process.env.API_URL;
React.useEffect(() => {
axios
.get(apiUrl, {
params: params,
})
.then((res) => {
const data = res.data;
setVideoData(data);
if (!data.showControls) {
setCanvasHeight(canvasHeight * 0.97);
} else {
setCanvasHeight(canvasHeight * 0.93);
}
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<>
<InteractivePlayer
canvasHeight={canvasHeight}
canvasWidth={canvasWidth}
videoData={videoData}
/>
</>
);
};
- The following environment variables can be found in interactive video applications
process.env.VIDEO_URL,
process.env.API_KEY,
process.env.API_URL;
0.2.1
2 months ago
0.2.0
2 months ago
0.1.9
2 months ago
0.2.2
2 months ago
0.1.8
2 months ago
0.1.7
3 months ago
0.1.6
3 months ago
0.1.2
3 months ago
0.1.1
3 months ago
0.1.4
3 months ago
0.1.3
3 months ago
0.1.0
3 months ago
0.0.11
3 months ago
0.0.10
3 months ago
0.0.8
3 months ago
0.0.7
3 months ago
0.0.6
3 months ago
0.0.5
3 months ago
0.0.4
3 months ago
0.0.3
3 months ago
0.0.2
3 months ago
0.0.1
3 months ago