h265-wasm-player
v0.1.1
Published
Workable h265 player for react
Downloads
6
Readme
React H265 WASM Player
A higher-level react component to play h265 video
About
Usage
NPM and Webpack/Browserify
Install via npm
. Use --save
to include it in your package.json.
npm install react-h265-wasm-player
Start by importing/requiring react-h265-wasm-player within your react code.
import ReactH265Player from 'react-h265-wasm-player';
import React, { useState } from 'react';
import ReactH265Player from './ReactH265Player'
function App() {
const [playerRef, setPlayerRef] = useState(null);
return (
<div className="App">
<header className="App-header">
<ReactH265Player
width="500" height="500"
url="h265_high.mp4"
bufferSize={512 * 1024}
isStream={false}
errorHandler={e => {
console.log("play error " + e.error + " status " + e.status + ".");
if (e.error === 1) {
// finish
}
}}
passRef={ref => setPlayerRef(ref)} />
<div>
<button onClick={() => {
playerRef.resume();
}}>play</button>
<button onClick={() => {
playerRef.pause();
}}>pause</button>
<button onClick={() => {
playerRef.stop()
}}>stop</button>
</div>
</header>
</div>
);
}
export default App;
In index.html
Because decode job is distributed in JS worker, for better performance You need to add these to your html container.
<script type="text/javascript" src="assets/common.js"></script>
<script type="text/javascript" src="assets/pcm-player.js"></script>
<script type="text/javascript" src="assets/webgl.js"></script>
<script type="text/javascript" src="assets/player.js"></script>
Todo
- Add vendor prefixes
- Find a good way for wasm loading
Issues
Feel free to contribute. Submit a Pull Request or open an issue for further discussion.
License
MIT © [tcper][tcper]