React hooks for playing video using HLS.js.
// MyVideoPlayer.tsx
import React, {useState} from "react";
import {Video, useIsPlaying, useDuration, usePosition} from "hls-hooks";
const MyVideoPlayer = () => {
const [isPlaying, setIsPlaying] = useIsPlaying();
const [duration] = useDuration();
const [position, setPosition] = usePosition();
const [newPosition, setNewPosition] = useState(0);
return (<div>
<Video/>
<button
onClick={() => setIsPlaying(!isPlaying)}
>
{isPlaying ? "Pause" : "Play"}
</button>
<input
onChange={(e) => setNewPosition(e.currentTarget.valueAsNumber)}
value={newPosition}
type={"number"}
/>
<button onClick={() => setPosition(newPosition)}>Set Position</button>
<p>{position} / {duration}</p>
</div>);
};
export default MyVideoPlayer;
// index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import {HlsHookProvider} from "hls-hooks";
import MyVideoPlayer from "./MyVideoPlayer";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<HlsHookProvider>
<MyVideoPlayer/>
</HlsHookProvider>
</React.StrictMode>
);
See API.md for further explanation and API reference.
Licensed under the MIT license.