JavaScript, Reactで動画(Video)を取り扱うライブラリ選定

React 動画ライブラリ比較結果 (2024年9月)

https://npmtrends.com/@mux-elements/mux-player-react-vs-react-player-vs-react-video-js-player-vs-video-react-vs-video.js

結論：react-player がよさそう

判断基準は、次のとおり。

1. 要件を満たす機能を備えていること。
2. React対応のライブラリであること。
3. 正式リリースがされており、安定版であること。
4. メンテナンスがされていること。
5. npm trends や GitHub Star などを参照して、使用率や人気がある状態であることが望ましい。

https://www.npmjs.com/package/react-player

React Playerについて

• react-player の README に渡せるPropsやCallback系などの設定値の一覧がまとまっているので、これを見れば何ができるのかは、把握できる🙆‍♂️
  • Props
    • https://github.com/CookPete/react-player?tab=readme-ov-file#props
  • Callback Properties
    • https://github.com/CookPete/react-player?tab=readme-ov-file#callback-props
• Youtube, Vimeo, Mux の各設定プロパティにも対応している
  • https://github.com/CookPete/react-player?tab=readme-ov-file#config-prop
    • Youtubeの場合の設定値(プロパティ)一覧
      • https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja

実装の事例

https://qiita.com/reiji1020/items/a65d84980b67f13449e1

https://blog.usize-tech.com/react-player/

https://github.com/cookpete/react-player/blob/master/examples/react/src/App.js

GitHub

Optionの説明など細かく掲載されている
https://github.com/CookPete/react-player

npm Page

https://www.npmjs.com/package/react-player

React Player デモ環境

react-playerのデモで、いろいろな動画タイプや、パラメーターを試すことができます🙏

https://cookpete.github.io/react-player/

Video.jsについて

https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543

https://qiita.com/manzoku_bukuro/items/ca8af6722ba647ab81f8

https://qiita.com/manzoku_bukuro/items/c4143663117c34cfc284

https://qiita.com/manzoku_bukuro/items/f5bef03dc2fdb53139e6

https://qiita.com/manzoku_bukuro/items/4869f2f800ec53f79c12

https://qiita.com/manzoku_bukuro/items/7d5cdca7f210991a9655

Video.js ✖️ React

https://videojs.com/guides/react/

https://techlab.q-co.jp/articles/134/

https://thilog.com/react_typescript_videojs_function/

Video.js Docs

https://videojs.com/

https://docs.videojs.com/

https://github.com/videojs/video.js

Mux Player ✖️ React

https://www.npmjs.com/package/@mux/mux-player-react

React Player

https://www.npmjs.com/package/react-player

https://blog.usize-tech.com/react-player/

React で作るゆっくり解説 feat. Remotion

https://zenn.dev/seya/articles/47c2c9ee354b60