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

Question

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

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

但是,他们只是说:

如果使用自定义HTML5视频控件,则可以使用JavaScript演示模式API添加画中画功能.

但没有告诉如何或在哪里找到它的文档.

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

Answer 1

首先,如果您正在寻找在Chrome中制作画中画,请参阅此链接

在画面中添加画中画元素

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

清单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;
 }

资源

• Javascript演示模式API
• developer.apple.com

在行动中.

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>