Eラーニングのサービスを開発しています。react-playerを使って学習用の動画を再生する機能を実装しているのですが、とある事情で再生速度の変更(1.5倍速再生等)を禁止する対応を取りました。
意外と調べても対応方法が出てこなかったため、メモを残しておきます。

やりたいこと

react-playerの再生速度の変更メニュー(赤枠の箇所)を非表示にしたい。

方法

configのcontrolsListでnoplaybackrateを指定するだけです。
controlsListではプレイヤーのコントロールバーに表示するメニューを制御できます。

// 必要な個所のみ記載
  const config = {
    file: {
      attributes: {
        controlsList: 'noplaybackrate',
      },
    },
  }

  <ReactPlayer
    config={config}
  />

なお公式ドキュメントによると、このcontrolsListは試験的な項目であり、将来挙動が変わる可能性があると書かれているためご注意ください。またブラウザによってはサポートされていない場合があるそうです。

今後の話

今回の対応の背景としては「ユーザーの学習時間を担保したい。」という意図があります。(例えば30分の動画であれば、必ず30分視聴させることで「30分学習した」という事実を担保する。)
だとすると、スキップ操作(未視聴の部分へのシークバーの移動)も禁止しなければなりません。
これについてはconfigをいじるだけではどうにもならないため、ざっくり言うと以下の方法で実現を考えています。

実装方針

何秒地点まで視聴済みかをstateで保持(変数名はplayedSecondsとする)
onProgress発火時に「現在の再生秒数 > playedSeconds」の場合はplayedSecondsを現在の再生秒数で更新
onSeekの発火時に「シーク先の秒数 > playedSeconds」の場合はシークバーをplayedSecondsまで戻す

※実際には動画開始時にonSeekが走ったり、シーク時にonProgressが走ったりするため、↑に加えて細かな制御も必要になる認識です。

もし他にもっと楽な実装方法あれば共有いただけると幸いです！