Nonsense Parser Microframework

    use-video-player-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    use-video-player

    custom react hook helps you to build custome video player

    Install

    yarn add use-video-player-hook or npm i use-video-player-hook

    Usage

     const videoElement = useRef(null);
    const {
        playerState,
        togglePlay,
        handleOnTimeUpdate,
        handleVideoProgress,
        handleVideoSpeed,
        toggleMute,
    } = useVideoPlayer(videoElement);
    
    
    return (
        <div>
            <div>
                <video
                    src={src}
                    ref={videoElement}
                    onTimeUpdate={handleOnTimeUpdate}
                />
                <div>
                    <button onClick={togglePlay}>
                        {!playerState.isPlaying ? (
                            <span>Play</span>
                        ) : (
                            <span>Pause</span>
                        )}
                    </button>
                    <input
                        type="range"
                        min="0"
                        max="100"
                        value={playerState.progress}
                        onChange={(e) => handleVideoProgress(e)}
                    />
                    <select
                        value={playerState.speed}
                        onChange={(e) => handleVideoSpeed(e)}
                    >
                        <option value="0.50">0.50x</option>
                        <option value="1">1x</option>
                        <option value="1.25">1.25x</option>
                        <option value="2">2x</option>
                    </select>
                    <button onClick={toggleMute}>
                        {!playerState.isMuted ? (
                            <span>Mute</span>
                        ) : (
                            <span>Unmute</span>
                        )}
                    </button>
                </div>
            </div>
        </div>
    );

    All you need is to pass videoElement ref as a parameter

         const videoElement = useRef(null);
         const {
          playerState,
          togglePlay,
          handleOnTimeUpdate,
          handleVideoProgress,
          handleVideoSpeed,
          toggleMute,
        } = useVideoPlayer(videoElement);

    Metadata

    package on npm https://npmjs.com/package/use-video-player-hook

    Show your support

    Give a ⭐️ if this project helped you!

    Install

    npm i use-video-player-hook

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • sarkis_kozanoghli