在 WWDC15 Apple推出Safari 9 (适用于MacOS的Safari 10),现在支持画中画。
然而,他们只是说:
如果您使用自定义HTML5视频控件,则可以使用JavaScript演示模式API添加画中画功能。
但没有说明如何或在何处找到其文档。
默认视频控制器有按钮,但如何通过javascript触发?
答案 0 :(得分:12)
首先,如果您正在寻找在Chrome中制作画中画,请see this link
自定义控件现在包含新的画中画按钮的标记,默认情况下可以看到。
清单1 此标记添加了画中画按钮
<video id="video" src="my-video.mp4"></video>
<div id="controls">
<button id="pipButton">PiP</button>
</div>
添加一个功能,使用演示模式API中的webkitSetPresentationMode属性切换画中画。
清单2 此代码使用点击事件监听器切换画中画。
var video = document.getElementById('video');
var PiP = document.getElementById('pipButton');
// 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;
}
var video = document.getElementById('video');
var PiP = document.getElementById('picture-in-picture');
// return false if it is a computer OS
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i) || false;
if (isMobile[0] == 'iPad' || isMobile == false) {
// 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;
}
} else {
PiP.disabled = true;
}
Only works in Safari 10+<br>
<video controls id="video" x-webkit-airplay="allow" width="320">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="controls">
<button id="picture-in-picture">Picture in Picture</button>
</div>