{"id":13626428,"url":"https://github.com/jimmycallin/react-hook-videojs","last_synced_at":"2026-04-01T22:50:15.094Z","repository":{"id":39537676,"uuid":"159427921","full_name":"jimmycallin/react-hook-videojs","owner":"jimmycallin","description":"Easy React integration of Video.js using hooks.","archived":false,"fork":false,"pushed_at":"2026-03-01T01:32:39.000Z","size":2610,"stargazers_count":56,"open_issues_count":1,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-01T02:22:05.591Z","etag":null,"topics":["hook","hooks","react","react-hooks","video","videojs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jimmycallin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-28T01:59:06.000Z","updated_at":"2026-03-01T01:32:42.000Z","dependencies_parsed_at":"2023-02-08T08:15:43.553Z","dependency_job_id":"fc3ea822-bd3b-42de-bcc5-3da4a9c07bbf","html_url":"https://github.com/jimmycallin/react-hook-videojs","commit_stats":{"total_commits":193,"total_committers":7,"mean_commits":"27.571428571428573","dds":"0.33678756476683935","last_synced_commit":"d78def8ebd27f91718a2cacb6a92bc2378ffafda"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/jimmycallin/react-hook-videojs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmycallin%2Freact-hook-videojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmycallin%2Freact-hook-videojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmycallin%2Freact-hook-videojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmycallin%2Freact-hook-videojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jimmycallin","download_url":"https://codeload.github.com/jimmycallin/react-hook-videojs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmycallin%2Freact-hook-videojs/sbom","scorecard":{"id":520780,"data":{"date":"2025-08-11","repo":{"name":"github.com/jimmycallin/react-hook-videojs","commit":"194851070205ee514c9e80cf10868c9f5d1832cb"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 2/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/jimmycallin/react-hook-videojs/node.js.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/jimmycallin/react-hook-videojs/node.js.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/jimmycallin/react-hook-videojs/node.js.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/jimmycallin/react-hook-videojs/node.js.yml/main?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/node.js.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"27 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T02:58:06.461Z","repository_id":39537676,"created_at":"2025-08-20T02:58:06.461Z","updated_at":"2025-08-20T02:58:06.461Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30026567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T23:50:51.253Z","status":"ssl_error","status_checked_at":"2026-03-02T23:50:19.316Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hook","hooks","react","react-hooks","video","videojs"],"created_at":"2024-08-01T21:02:18.279Z","updated_at":"2026-03-03T00:01:44.379Z","avatar_url":"https://github.com/jimmycallin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-hook-videojs\n\n\u003e A React hook for integrating Video.js with React 19.\n\u003e It handles player setup, disposal, Strict Mode behavior, and options-driven reinitialization with a small, predictable API.\n\n[![NPM](https://img.shields.io/npm/v/react-hook-videojs.svg)](https://www.npmjs.com/package/react-hook-videojs)\n\nLive example: [https://jimmycallin.github.io/react-hook-videojs/](https://jimmycallin.github.io/react-hook-videojs/)\n\nPR preview (for open PRs): `https://jimmycallin.github.io/react-hook-videojs/pr-\u003cPR_NUMBER\u003e/`\n\n## Quick links\n\n- [Installation](#installation)\n- [Quick start](#quick-start)\n- [API reference](#api-reference)\n- [Recipes](#recipes)\n- [React Server Components (Next.js)](#react-server-components-nextjs)\n- [Troubleshooting](#troubleshooting)\n\n## Why this hook\n\n- React-first Video.js lifecycle management (mount/init, unmount/dispose)\n- Strict Mode-safe behavior in React 19 development\n- Predictable reinitialization when options change\n- Native `\u003cvideo\u003e` props, children, and `ref` forwarding\n- Minimal API: `const { Video, ready, player } = useVideoJS(...)`\n\n---\n\n## Installation\n\n```bash\nnpm install react-hook-videojs video.js\n# or\npnpm add react-hook-videojs video.js\n```\n\n**Peer requirements:** React ≥ 19, Video.js 7 or 8.\n\n---\n\n## Quick start\n\n```tsx\nimport React, { useMemo } from \"react\";\nimport \"video.js/dist/video-js.css\";\nimport { useVideoJS } from \"react-hook-videojs\";\n\nconst MyPlayer = () =\u003e {\n  // Always memoize options so the player only reinitializes when values change.\n  const options = useMemo(\n    () =\u003e ({ sources: [{ src: \"https://example.com/video.mp4\" }] }),\n    [],\n  );\n\n  const { Video, ready, player } = useVideoJS(options);\n\n  return \u003cVideo /\u003e;\n};\n```\n\n`useVideoJS` returns three values:\n\n| Return value | Type                    | Description                                                          |\n| ------------ | ----------------------- | -------------------------------------------------------------------- |\n| `Video`      | `VideoComponent`        | React component to render. Accepts all `\u003cvideo\u003e` props and children. |\n| `ready`      | `boolean`               | `true` once the player has fired its `\"ready\"` event.                |\n| `player`     | `VideoJsPlayer \\| null` | The Video.js player instance when ready, `null` otherwise.           |\n\n---\n\n## API reference\n\n### `useVideoJS(videoJsOptions, classNames?)`\n\n```ts\nimport { useVideoJS } from \"react-hook-videojs\";\n\nconst { Video, ready, player } = useVideoJS(\n  videoJsOptions, // VideoJsPlayerOptions — must be memoized\n  classNames, // optional string — extra CSS classes on the \u003cvideo\u003e element\n);\n```\n\n**`videoJsOptions`** is passed directly to Video.js — see the [Video.js options reference](https://videojs.com/guides/options) for all available properties.\n\n**Important:** wrap `videoJsOptions` in `React.useMemo` (or define it outside the component).\nThe hook deep-clones options and reinitializes when the options object changes;\npassing a fresh object on every render recreates the player every render.\n\n---\n\n## Recipes\n\nThese patterns cover the most common integrations.\n\n### Accessing player events\n\nUse a `useEffect` that depends on the `player` value. The effect runs when the player becomes available and the cleanup function runs when it is disposed.\n\n```tsx\nimport React, { useEffect, useMemo } from \"react\";\nimport { useVideoJS } from \"react-hook-videojs\";\n\nconst MyPlayer = ({ src }: { src: string }) =\u003e {\n  const options = useMemo(() =\u003e ({ sources: [{ src }] }), [src]);\n  const { Video, player } = useVideoJS(options);\n\n  useEffect(() =\u003e {\n    if (!player) return;\n\n    const onPlay = () =\u003e console.log(\"playing\");\n    const onPause = () =\u003e console.log(\"paused\");\n    const onEnded = () =\u003e console.log(\"ended\");\n    const onTimeUpdate = () =\u003e console.log(\"currentTime\", player.currentTime());\n\n    player.on(\"play\", onPlay);\n    player.on(\"pause\", onPause);\n    player.on(\"ended\", onEnded);\n    player.on(\"timeupdate\", onTimeUpdate);\n\n    return () =\u003e {\n      if (!player.isDisposed()) {\n        player.off(\"play\", onPlay);\n        player.off(\"pause\", onPause);\n        player.off(\"ended\", onEnded);\n        player.off(\"timeupdate\", onTimeUpdate);\n      }\n    };\n  }, [player]);\n\n  return \u003cVideo /\u003e;\n};\n```\n\n### Calling player methods imperatively\n\nUse `player` for direct Video.js API calls.\n\n```tsx\nconst { Video, ready, player } = useVideoJS(options);\n\nconst handlePlayPause = () =\u003e {\n  if (!player) return;\n  if (player.paused()) {\n    player.play();\n  } else {\n    player.pause();\n  }\n};\n\nconst handleSeek = (seconds: number) =\u003e {\n  player?.currentTime(seconds);\n};\n\nconst handleVolume = (level: number) =\u003e {\n  player?.volume(level); // 0.0 – 1.0\n};\n\nconst handleRate = (rate: number) =\u003e {\n  player?.playbackRate(rate); // e.g. 0.5, 1, 1.5, 2\n};\n```\n\n### Text tracks (captions / subtitles)\n\nPass a `\u003ctrack\u003e` element as a child of `\u003cVideo\u003e`:\n\n```tsx\nconst { Video } = useVideoJS(options);\n\nreturn (\n  \u003cVideo\u003e\n    \u003ctrack\n      kind=\"captions\"\n      src=\"https://example.com/captions-en.vtt\"\n      srcLang=\"en\"\n      label=\"English\"\n      default\n    /\u003e\n    \u003ctrack\n      kind=\"subtitles\"\n      src=\"https://example.com/subtitles-fr.vtt\"\n      srcLang=\"fr\"\n      label=\"Français\"\n    /\u003e\n  \u003c/Video\u003e\n);\n```\n\n### Native `\u003cvideo\u003e` attributes\n\n`Video` forwards all standard `\u003cvideo\u003e` element attributes:\n\n```tsx\n\u003cVideo muted autoPlay playsInline className=\"my-player\" data-testid=\"video\" /\u003e\n```\n\n### Forwarding a ref to the `\u003cvideo\u003e` element\n\n```tsx\nimport React, { useRef } from \"react\";\n\nconst MyPlayer = () =\u003e {\n  const videoRef = useRef\u003cHTMLVideoElement\u003e(null);\n  const { Video } = useVideoJS(options);\n\n  return \u003cVideo ref={videoRef} /\u003e;\n};\n```\n\n### Switching sources\n\nUpdate `sources` in options to trigger automatic reinitialization.\n\n```tsx\nconst [src, setSrc] = useState(\"https://example.com/video-1.mp4\");\n\nconst options = useMemo(() =\u003e ({ sources: [{ src }] }), [src]);\nconst { Video } = useVideoJS(options);\n\nreturn (\n  \u003c\u003e\n    \u003cVideo /\u003e\n    \u003cbutton onClick={() =\u003e setSrc(\"https://example.com/video-2.mp4\")}\u003e\n      Switch source\n    \u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\n### Playback rate menu\n\nPass `playbackRates` in options to add a playback speed menu to the Video.js control bar:\n\n```tsx\nconst options = useMemo(\n  () =\u003e ({\n    sources: [{ src }],\n    controls: true,\n    playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],\n  }),\n  [src],\n);\n```\n\n### Mount / unmount\n\nConditionally render `\u003cVideo\u003e` to mount and unmount the player.\nThe player is disposed on unmount and reinitialized on remount.\n\n```tsx\nconst [visible, setVisible] = useState(true);\nconst { Video } = useVideoJS(options);\n\nreturn (\n  \u003c\u003e\n    {visible \u0026\u0026 \u003cVideo /\u003e}\n    \u003cbutton onClick={() =\u003e setVisible((v) =\u003e !v)}\u003eToggle player\u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\n### Poster image\n\n```tsx\nconst options = useMemo(\n  () =\u003e ({\n    sources: [{ src }],\n    poster: \"https://example.com/poster.jpg\",\n  }),\n  [src],\n);\n```\n\n### React Strict Mode\n\nThe hook is designed for React 19 Strict Mode, where components mount/unmount\ntwice in development. It handles this lifecycle without leaking player instances.\n\n## React Server Components\n\n`react-hook-videojs` is **client-only**.\n\n- Use it inside a component with the `\"use client\"` directive.\n- Do not call `useVideoJS` from a Server Component.\n- Pass only serializable props from Server Components to Client Components.\n\n### Recommended App Router pattern\n\nCreate a dedicated client wrapper for the player:\n\n```tsx\n// app/components/video-player-client.tsx\n\"use client\";\n\nimport { useMemo } from \"react\";\nimport \"video.js/dist/video-js.css\";\nimport { useVideoJS } from \"react-hook-videojs\";\n\nexport function VideoPlayerClient({ src }: { src: string }) {\n  const options = useMemo(() =\u003e ({ sources: [{ src }] }), [src]);\n  const { Video } = useVideoJS(options);\n  return \u003cVideo controls playsInline /\u003e;\n}\n```\n\nRender that client component from a Server Component:\n\n```tsx\n// app/page.tsx (Server Component)\nimport { VideoPlayerClient } from \"./components/video-player-client\";\n\nexport default async function Page() {\n  const src = \"https://example.com/video.mp4\";\n  return \u003cVideoPlayerClient src={src} /\u003e;\n}\n```\n\n### RSC notes\n\n- Build `videoJsOptions` in the client component with `useMemo`.\n- If options come from the server, pass plain JSON-ish data (strings, numbers,\n  booleans, arrays, objects) and construct final Video.js options client-side.\n- Avoid passing DOM nodes/functions across the server boundary.\n\n---\n\n## Run the example app\n\n```bash\npnpm install\npnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173). The example demonstrates:\n\n- Multiple video sources with live switching\n- VTT caption track via `\u003ctrack\u003e` child element\n- Controls, autoplay, loop, muted, and poster options\n- Mount/unmount lifecycle\n- Imperative play/pause, seek, volume, and playback speed controls\n- Live player state display (`ready`, `player`, `currentTime`, `duration`, …)\n- Full event log (`play`, `pause`, `ended`, `timeupdate`, `error`, …)\n\n### Run the React × Video.js compatibility matrix\n\n```bash\npnpm run test:matrix:local\n```\n\nRuns the repository's local compatibility matrix script in a temporary worktree.\n\n---\n\n## Troubleshooting\n\n### Player keeps reinitializing\n\n`videoJsOptions` is probably recreated each render. Memoize it with `useMemo`.\n\n### SSR / RSC error (`window` / DOM access)\n\n`useVideoJS` is client-only. In Next.js / RSC, move it into a client component\nand add the `\"use client\"` directive.\n\n### Next.js App Router warning about non-serializable props\n\nServer Components can only pass serializable props to Client Components. Pass\nplain data (like `src`, `poster`, `playbackRates`) and create memoized\n`videoJsOptions` in the client wrapper.\n\n### Video.js styles look missing\n\nImport Video.js CSS once in your app:\n\n```tsx\nimport \"video.js/dist/video-js.css\";\n```\n\n---\n\n## License\n\nMIT © [jimmycallin](https://github.com/jimmycallin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmycallin%2Freact-hook-videojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimmycallin%2Freact-hook-videojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmycallin%2Freact-hook-videojs/lists"}