一, 下面播报一则新闻
Chrome 70 已经原生支持 html5 <video > 播放时候 Picture-in-Picture, 也就是俗称的画中画技术, 也就是很多视频网站看评论时候, 播放视频变小挂在右下角的这种交互技术.
画中画视频播放兼容性
我一瞅自己的 Chrome 浏览器, 正好就是 Chrome 70, 体验了一番, 挺有意思的, 值得介绍下, 以后估计用得着.
二, 先看画中画实例 demo
点击页面的切换按钮, 或者右键视频→画中画, 都可以进入视频画中画模式:
右键视频 画中画示意
在页面右下角可以看到一个小视频, 尺寸小小的视频:
浏览器右下角有视频播放界面
实际上, 此时的这个小视频是个脱离于浏览器定位的, 顶级的播放窗口, 我们把浏览器最小化, 此视频依然会在右下角播放, 就像腾讯视频客户端播放器的精简模式一样:
显示在桌面窗体上
于是, 我们可以一边码代码, 一边看网页视频了.
三, 画中画几个 API 简介
画中画看上去很酷, 总感觉 API 也会很复杂, 实际上, 除了名称长了点, 超简单的.
假设变量 video 就是我们的 < video > 视频元素, 则, 进入画中画模式, 直接一句:
- // 进入画中画
- video.requestPictureInPicture();
- // 退出画中画
- document.exitPictureInPicture();
- // 进入画中画模式时候执行
- video.addEventListener('enterpictureinpicture', function() {
- // 已进入画中画模式
- });
- // 退出画中画模式时候执行
- video.addEventListener('leavepictureinpicture', function() {
- // 已退出画中画模式
- });
- {
- height: 192,
- onresize: null,
- width: 341
- }
- video.addEventListener('enterpictureinpicture', function(event) {
- var pipWindow = event.pictureInPictureWindow;
- // pipWindow 就是一个 PictureInPictureWindow 对象
- // 我们可以绑定 resize 事件
- pipWindow.addEventListener('resize', function () {
- // pipWindow.width 就是小视频窗口的宽度
- // pipWindow.height 就是小视频窗口的高度
- });
- });
来源: http://www.jianshu.com/p/32fbf64fc321