Safari画中画 - 自定义HTML5视频控制器 [英] Safari Picture In Picture - custom HTML5 video controller

问题描述

在 WWDC15 Apple推出Safari 9 （Safari 10对于MacOS），现在支持画中画。

At the WWDC15 Apple introduces Safari 9 (Safari 10 for MacOS), there now have support for Picture in Picture.

然而，他们只是说：

如果您使用自定义HTML5视频控件，则可以添加图片使用JavaScript演示模式API的图片功能。

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

但不知道如何或在何处查找其文档。

but not telling how or where to find its documentation.

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

The default video controller has the button, but how do I trigger it by javascript?

推荐答案

Picture-in-Picture API非常简单，遗憾的是它仅适用于 HTMLVideoEleme nt 目前。

The Picture-in-Picture API is very simple, sadly its only applies to HTMLVideoElement at the moment.

这是画中画

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

来自developer.apple.com Javascript演示模式API

From developer.apple.com Javascript presentation mode API

行动中。

In action.

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>

这篇关于Safari画中画 - 自定义HTML5视频控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！