html视频位置控制器,javascript – Safari画中画 – 自定义HTML5视频控制器

Picture-in-Picture API非常简单,遗憾的是它目前仅适用于

HTMLVideoElement.

这是画中画

if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {

// Toggle PiP when the user clicks the button.

pipButtonElement.addEventListener("click", function(event) {

video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");

});

} else {

pipButtonElement.disabled = true;

}

资源

在行动中.

var video = document.getElementById('video');

var PiP = document.getElementById('picture-in-picture');

// picture-in-picture

if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {

// Toggle PiP when the user clicks the button.

PiP.addEventListener("click", function(event) {

video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");

});

} else {

PiP.disabled = true;

}

Only works in Safari 10+

Picture in Picture