html5视频标签video画中画几个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了，两个方法（进入和退出），两个事件（进入和退出）以及一个对象（画中画窗体对象）。

这点程度的学习相信大家一定都毫无压力。
————————————————
链接：https://blog.csdn.net/llll789789/article/details/97823047

html5视频标签video画中画几个API相关推荐

HTML5视频标签 video 的 poster 属性
<video> 标签定义视频,比如电影片段或其他视频流,可以放置视频资源,并添加视频控件. 支持的浏览器: Internet Explorer 9+, Firefox, Opera, Ch ...
html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许没有 ...
Chromium为视频标签 video 全屏播放的过程分析
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在Chr ...
Chromium为视频标签video全屏播放的过程分析
在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式 ...
html5是播放什么中新,关于html5中标签video播放的新解析-
这篇文章主要介绍了关于html5中标签video播放的新解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下前端同学要使用 HTML5 播放器视频,必然会使用 video 标签,不过大 ...
html怎么转换m3u格式,HTML5视频标签可以播放m3u文件吗？
我正在使用HTML5视频标签实现视频播放器.我收到的视频资源由Brightcove托管和交付,它是一个m3u文件.是否可以通过HTML5视频标签播放此视频?HTML5视频标签可以播放m3u文件吗? 我 ...
Chromium视频标签video简要介绍和学习计划
随着互联网的发展,在网页上观看视频变得越来越流行,尤其是泛娱乐(手机直播)大行其道的今天.在HTML5之前,在网页上播放视频需要插件支持,例如Flash插件.有了HTML5之后,标签<video ...
Chromium为视频标签video创建播放器的过程分析
Chromium是通过WebKit解析网页内容的.当WebKit遇到<video>标签时,就会创建一个播放器实例.WebKit是平台无关的,而播放器实现是平台相关的.因此,WebKit并没 ...
android--------WebView实现 Html5 视频标签加载
为什么80%的码农都做不了架构师?>>> 自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit ...

html5视频标签video画中画几个API

html5视频标签video画中画几个API相关推荐

最新文章

热门文章