videoタグのcontrolsのフルスクリーンは検知できますか？

Question

表題の通りです。

<video
  id="video"
  class="video"
  controls
></video>

↑こんな感じのvideoタグがあったとして、
controlsのフルスクリーンボタンを押された際に検知できないのかなと。

使用用途はフルスクリーンを検知してclassにobject-fitをつけ外しするのに使いたいです。

ちなみにMDNには載っていませんでした。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

よろしくお願いします

Answer 1

https://developer.mozilla.org/ja/docs/Web/API/Fullscreen_API

全画面モードで表示したい要素 (例えば <video> 要素) があるときに、その要素で requestFullscreen() メソッドを呼び出すと全画面で表示できます。

DocumentOrShadowRoot.fullscreenElement
fullscreenElement プロパティで、現在全画面モードで表示されている DOM (またはシャドウ DOM) 上の Element が分かります。これが null の場合、文書は全画面モードになっていません。
Document.fullscreenEnabled
fullscreenEnabled プロパティで、全画面モードになることができるかどうかが分かります。全画面モードが何らかの理由で利用できない場合 ("fullscreen" 機能が許可されていない場合や、全画面モードに対応していない場合など) は false になります。

Comments

[peran427]

ありがとうございます。
確かにrequestFullscreen()でフルスクリーンにした場合はfullscreenchangeなどで検知できますね。

自分でフルスクリーンボタンを実装している場合はこれで良いと思うのですが、
videoタグのcontrols(ブラウザで標準実装されているもの)のフルスクリーンボタンを押下した場合は検知できないように見えました。