HTMLVideoElement: enterpictureinpicture イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
enterpictureinpicture
イベントは、HTMLVideoElement
がピクチャインピクチャモードに入ることに成功した場合に発行されます。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("enterpictureinpicture", (event) => {});
onenterpictureinpicture = (event) => {};
イベント型
PictureInPictureEvent
です。Event
を継承しています。
イベントプロパティ
このインターフェイスには、親である Event
から継承したプロパティもあります。
例
この例は HTMLVideoElement の leavepictureinpicture
イベントのイベントリスナーを追加し、イベントハンドラーがイベントの発行に反応したときにメッセージを投稿します。
addEventListener()
を使用した場合:
js
const video = document.querySelector("#video");
const button = document.querySelector("#button");
function onEnterPip() {
console.log("Picture-in-Picture mode activated!");
}
video.addEventListener("enterpictureinpicture", onEnterPip, false);
button.onclick = () => {
video.requestPictureInPicture();
};
onenterpictureinpicture
イベントハンドラープロパティを使用した場合:
js
const video = document.querySelector("#video");
const button = document.querySelector("#button");
function onEnterPip() {
console.log("Picture-in-Picture mode activated!");
}
video.onenterpictureinpicture = onEnterPip;
button.onclick = () => {
video.requestPictureInPicture();
};
仕様書
Specification |
---|
Picture-in-Picture # eventdef-htmlvideoelement-enterpictureinpicture |
Picture-in-Picture # dom-htmlvideoelement-onenterpictureinpicture |
ブラウザーの互換性
BCD tables only load in the browser