Pixvana Web Player
Pixvana web video player
Dev Setup
To run the Pixvana standalone player locally:
npm install
This will install all the dependencies including http-server which is used to serve the standalone player which has no server infrastructure of its own.
Then build the player code:
grunt
Run:
npm start
This will start http-server and serve the standalone player sample in ./web.
Access the player at http://127.0.0.1:8080/. This will load a test video. To load other videos append an opf querystring parameter. For example:
http://localhost:8080/CD6-R7M-YM6 http://localhost:8080/CD6R7MYM6 http://localhost:8080/?spin=https://alpha.pixvana.com/playerapi/collections/player?accessCode%3DCD6R7MYM6 http://localhost:8080/?opf=https://spin.pixvana.com/media/1d4f1165-e32b-4746-9d10-e2e19fd11bb0/index.opf
React component
The Pixvana web player react component project is in the pixvana-player-react folder.
pixvana-player-react
To build:
cd pixvana-player-react
npm install
webpack
The react component code will be built to build/index.js. To package the component for deployment via npm:
npm pack
Using @pixvana/player-react
Here is an example of using the component to render a spin with heatmap data:
import React from 'react';
import { PixvanaPlayer } from '@pixvana/player-react';
function App() {
return (
<div className="App">
<PixvanaPlayer spin="https://alpha.pixvana.com/playerapi/collections/player?accessCode=4VMC97QHW" heatmap={true} start="2018-01-22T19:19:55.167Z" end="2020-01-23T19:28:06.035Z" showFlatProjection={true} />
</div>
);
}
The component supports all the same parameters as the index.html version of the player via props:
PixvanaPlayer.propTypes = {
opf: PropTypes.string,
spin: PropTypes.string,
autoPlay: PropTypes.bool,
showStatsToggle: PropTypes.bool,
showViewReset: PropTypes.bool,
showWireframe: PropTypes.bool,
showFullscreen: PropTypes.bool,
showBitrateSelector: PropTypes.bool,
flatProjection: PropTypes.bool,
showFlatProjection: PropTypes.bool,
heatmap: PropTypes.bool,
start: PropTypes.string,
end: PropTypes.string,
onPlayerError: PropTypes.func
};
Publish to NPM
Edit pixvana-player-react/package.json file. Find the version node and change the version number
"version": "1.0.16"
build the project in terminal, under folder pixvana-player-react/
npm run-script build
Publish to NPM
npm publish
Use @pixvana/pixvana-webplayer-react
yarn add @pixvana/pixvana-webplayer-react