javascript - Safari 画中画 - 自定义 HTML5 视频 Controller

Question

带有画中画 (PiP) 的 Safari HTML5 自定义视频 Controller

在 WWDC15 上，Apple 推出了 Safari 9 (适用于 MacOS 的 Safari 10)，现在支持画中画。

然而，他们只是说:

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

但没有说明如何或在哪里可以找到它的文档。

默认视频 Controller 有按钮，但我如何通过 javascript 触发它？

Answer 1

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

---

在您的标记中添加画中画元素

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

list 1 此标记添加了一个画中画按钮

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

为按钮添加功能

使用演示模式 API 中的 webkitSetPresentationMode 属性添加一个函数来切换画中画。

list 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;
 }

---

资源

• Javascript presentation mode API
• developer.apple.com

---

在行动中。

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>