問題点
どうしてもストリーミング配信(HLS)を行う際にあらゆるプレーヤーの操作を禁止させたかった。
video.js を用いてHLSを配信を行い、HTMLファイルにvideoタグでそれを埋め込む。視聴者に一時停止や早送りなどの操作を一切させず、画面を読み込んだら自動的に再生が行われるような環境を作成したかった。
videoタグの中に autoplay をつけることで自動再生をさせることが可能であるがこれはChromeやFirefox、Safariなどでは再生されないという問題点が存在した。
再生ボタンを設置し、それをクリックして読み込ませることでそれらのブラウザでも正常に再生することが可能となる。しかし、再生ボタンを表示させるには controls が必要であり、これを表示させると画面をクリックすることで一時停止が可能となってしまう。これを回避したかった。
つまり、『video.js を用いて、Chromeブラウザなどでも自動再生を可能にし、視聴者に一切の操作を禁止させたかった』ということだ。
解決法
<video id="video_exam_streaming" class="video-js vjs-default-skin vjs-big-play-centered" autoplay muted preload="auto" width="720" height="406" data-setup=''></video>
これでいけた。
つまるところ、controls を削除し、 autoplay と mutedを追加したということだ。
どうやらAutoplayはMutedと一緒に使うとChromeなどでも有効化されるらしい。(Safari、Firefoxでは未検証)
参考: https://stackoverflow.com/questions/50607588/chrome-video-autoplay
私は音声が必要な動画でなかったため、ミュートにした上でそのような設定を施した。結果、うまくChrome上でも自動再生が可能となった。
また、プレーヤーを右クリックすると一時停止が可能となってしまうため、それを防止するためにHTMLに右クリックを禁止するよう加えた。
<body oncopy="return false;">
参考: 右クリックを禁止する方法と禁止を解除(回避)する方法
本来画面全体の右クリックは閲覧者にとって不便を強いることなのであまり推奨されないが、今回特殊なページを作成しているのでヨシとした(？)。
