HLSストリーミングをreact-playerで実装する

この記事はアドベントカレンダー4日目の記事です🎄🎅 HRBrain Advent Calendar 2025 はじめに こんにちは。HRBrainで学習管理サービス「HRBrain ラーニング」を開発している渡邉です。 最近、動画コンテンツの配信機能をHLS（HTTP Live Streaming）で実装しました。「ライブラリを使えばすぐできるだろう」と思っていたら、Cookie認証が効かなかったり、状態管理で詰まったり。この記事では、そんな試行錯誤の末にたどり着いた「react-player」を使ったHLS動画プレーヤーの実装方法を紹介します。 なお、この記事ではReactのフロントエンド実装だけを扱います。HLS動画ファイルの生成方法やサーバー側の配信設定については触れません。 執筆時点（2025/12/4）での最新バージョン： react-player@3.4.0 HLSとは H