byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8242
一, 下面播报一则新闻
Chrome 70 已经原生支持 html5 <video> 播放时候 Picture-in-Picture, 也就是俗称的画中画技术, 也就是很多视频网站看评论时候, 播放视频变小挂在右下角的这种交互技术.
我一瞅自己的 Chrome 浏览器, 正好就是 Chrome 70, 体验了一番, 挺有意思的, 值得介绍下, 以后估计用得着.
二, 先看画中画实例 demo
请确保您的浏览器支持画中画, 然后可以狠狠地点击这里: Video 视频画中画效果 demo
点击页面的切换按钮, 或者右键视频→画中画, 都可以进入视频画中画模式:
在页面右下角可以看到一个小视频, 尺寸小小的视频:
实际上, 此时的这个小视频是个脱离于浏览器定位的, 顶级的播放窗口, 我们把浏览器最小化, 此视频依然会在右下角播放, 就像腾讯视频客户端播放器的精简模式一样:
于是, 我们可以一边码代码, 一边看网页视频了.
三, 画中画几个 API 简介
画中画看上去很酷, 总感觉 API 也会很复杂, 实际上, 除了名称长了点, 超简单的.
假设变量 video 就是我们的 <video> 视频元素, 则, 进入画中画模式, 直接一句:
- // 进入画中画
- video.requestPictureInPicture();
退出画中画模式, 也是一句:
- // 退出画中画
- document.exitPictureInPicture();
为了方便我们监听视频的播放状态, 还提供了 2 个事件 API 接口, 如下:
- // 进入画中画模式时候执行
- video.addEventListener('enterpictureinpicture', function() {
- // 已进入画中画模式
- });
- // 退出画中画模式时候执行
- video.addEventListener('leavepictureinpicture', function() {
- // 已退出画中画模式
- });
最后, 还提供了一个 PictureInPictureWindow 对象, 也就是画中画窗口对象, 包含 width , height 和 onresize 这些属性, 示意如下:
- {
- height: 192,
- onresize: null,
- width: 341
- }
width , height 表示小窗口现在的高度和宽度, onresize 属性值是个 Function, 可以监听小窗口尺寸的改变. PictureInPictureWindow 对象的获取在画中画响应事件的 event 对象中, 例如:
- video.addEventListener('enterpictureinpicture', function(event) {
- var pipWindow = event.pictureInPictureWindow;
- // pipWindow 就是一个 PictureInPictureWindow 对象
- // 我们可以绑定 resize 事件
- pipWindow.addEventListener('resize', function () {
- // pipWindow.width 就是小视频窗口的宽度
- // pipWindow.height 就是小视频窗口的高度
- });
- });
以上, 基本上就是 HTML video Picture-in-Picture 画中画技术全部 API 了, 两个方法 (进入和退出), 两个事件(进入和退出) 以及一个对象(画中画窗体对象).
这点程度的学习相信大家一定都毫无压力.
四, 最后再说点啥
当视频进入画中画模式的时候, 浏览器的标签页上会出现一个方框框小标志, 同时 title 提示也会发生变化, 如下截图:
当进入画中画模式的时候, 原视频会停止播放, 置灰, 并提示已进入画中画模式:
如果对完整的交互实现感兴趣, 可以参见 demo 页面底部的 JS 源代码.
其他资源:
API 规范文档: Picture-in-Picture web API https://wicg.github.io/picture-in-picture/
兼容性: https://caniuse.com/#search=picture-in-picture
以上~
来源: http://www.tuicool.com/articles/ABnERjM