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

Posted 2023-02-19

【中文标题】Safari 画中画 - 自定义 HTML5 视频控制器

【英文标题】：Safari Picture In Picture - custom HTML5 video controller

【发布时间】：2017-01-18 17:04:56

【问题描述】：

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

在WWDC15上，Apple 推出了 Safari 9（MacOS 的 Safari 10），现在支持画中画。

但是，他们只是说：

如果您使用自定义 HTML5 视频控件，则可以使用 javascript 演示模式 API 添加画中画功能。

但不告诉如何或在哪里找到它的文档。

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

【参考方案1】：

首先，如果您正在寻找在 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;
 

---

资源

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" >
  <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>

【讨论】：

@Toniq 遗憾的是 iPhone 不支持画中画

但是你仍然可以在 video.webkitSupportsPresentationMode 上得到正确的结果。我不想测试iphone，不支持这个功能怎么测试？

@Toniq tbh 我从来没有真正想过这个问题。我稍后会回信回复?

@Toniq 好的，所以我一直在寻找为什么它仍然在 iPhone 上显示画中画的任何原因，我开始担心这是 ios 上的 Safari 中的一个错误，因为 iPad 确实支持它而不是iPhone，据我所知，像 Vimeo 这样的网站使用设备检测来防止它在 iPhone 上查看。我已经向 Apple Developer 团队询问过这个问题，我会在得到答复后立即回复他们所说的话