Safari 画中画 - 自定义 HTML5 视频控制器

Safari Picture In Picture - custom HTML5 video controller

Safari HTML5 带有画中画 (PiP) 的自定义视频控制器

WWDC15 Apple 推出了 Safari 9 (Safari 10 for MacOS),现在支持画中画。

然而,他们只是说:

If you use custom HTML5 video controls, you can add Picture in Picture functionality using the JavaScript presentation mode API.

但没有说明如何或在何处找到其文档。

默认视频控制器有按钮,但我如何通过 javascript 触发它?

首先,如果您要在 Chrome 中制作画中画,那么 see this link


将画中画元素添加到您的标记中

自定义控件现在包含新画中画按钮的标记,默认情况下该按钮可见。

清单 1 此标记添加画中画按钮

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="pipButton">PiP</button>
</div>

向按钮添加功能

添加一个功能,使用 webkitSetPresentationMode 属性 从演示模式切换画中画 API。

清单 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');

// 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+<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>