HTMLVideoElement: enterpictureinpicture 事件
当 HTMLVideoElement 成功进入画中画模式时，会触发 enterpictureinpicture 事件。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("enterpictureinpicture", (event) => { })
onenterpictureinpicture = (event) => { }
事件类型
一个 PictureInPictureEvent。继承自 Event。
事件属性
此接口还继承了其父接口 Event 的属性。
示例
这些示例为 HTMLVideoElement 的 enterpictureinpicture 事件添加了一个事件监听器，然后在事件处理程序响应事件触发时发布一条消息。
使用 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);
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();
};
规范
| 规范 |
|---|
| 画中画 # eventdef-htmlvideoelement-enterpictureinpicture |
| 画中画 # dom-htmlvideoelement-onenterpictureinpicture |
浏览器兼容性
加载中…