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) => {};
事件类型
事件属性
此接口继承他的父类 Event
的属性。
示例
这些示例为 enterpictureinpicture
事件添加事件侦听器,然后在该事件处理程序对事件触发做出反应时发布消息。
使用 addEventListener()
:
js
const video = document.querySelector("#video");
const button = document.querySelector("#button");
function onEnterPip() {
console.log("画中画模式已激活!");
}
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("画中画模式已激活!");
}
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