Bootstrap

JavaScript画中画API

作为网络媒体的忠实拥护者,我一直为能够控制媒体的方式而感到兴奋。 也许我对<video>标签及其相关元素和属性之类的简单事物感到兴奋,因为网络上的媒体始于自定义编解码器,浏览器扩展和Flash。 我在网络上兴奋的最新真棒媒体功能是画中画(Picture-in-Picture),这是一种本地Web API,用于显示停靠的视频。 让我们看看它是如何工作的!

画中画的好处

在使用画中画之前,重要的是要知道为什么使用它以及从中获得的好处:

  • 用户滚动时无需创建自己的停靠视频元素-浏览器会为您完成!
  • 出色的性能,可用性和维护优势
  • 停靠的视频显示在浏览器中所有标签的上方,而不仅仅是在其中启动的标签
  • 保持在画中画模式,直到您更改页面

检测画中画支持

在使用任何API之前,最好确保已支持和启用该功能。 为此,浏览器将显示document.pictureInPictureEnabled以及每个视频属性:

if(
    do
;