H5视频播放器开发-画中画

红太狼 2022-03-27 02:05 447阅读 0赞

###### *最新更新时间：2019年1月11日16:59:54* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：画中画

#### 概述 ####

> 画中画功能是chrome70+的新功能，视频窗口能够从浏览器独立出来播放视频，看起来像是一个本地应用。

#### 添加画中画功能 ####

var video = document.createElement("VIDEO");
    var togglebtn = document.getElementById('btn');
    //添加画中画功能开启关闭事件
    togglebtn.addEventListener('click', function() { 
    	if (!document.pictureInPictureElement) { //开启
    		video.requestPictureInPicture().catch(error => { 
    			console.log(error,'Video failed to enter Picture-in-Picture mode.');
    		});
    	} else { //关闭
    		document.exitPictureInPicture().catch(error => { 
    			console.log(error,'Video failed to leave Picture-in-Picture mode.');
    		});
    	}
    });
    //video元素添加事件
    video.addEventListener('enterpictureinpicture', function(event) { 
    	console.log('Video entered Picture-in-Picture mode.');
    });
    //video元素添加事件
    video.addEventListener('leavepictureinpicture', function(e) { 
    	console.log('Video left Picture-in-Picture mode.');
    });

#### 参考资料 ####

*  [官方文档][Link 1]
 *  [官方demo][demo]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 1]: https://wicg.github.io/picture-in-picture/
[demo]: https://googlechrome.github.io/samples/picture-in-picture/
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关 video.h5.player.js视频播放器

> video.h5.player.js（内部项目）是一款基于[flowplayer][]开发的视频播放器，播放核心采用video标签/flash控件，界面完全交由用户

悠悠/ 2024年02月19日 18:13/ 0 赞/ 84 阅读

相关 liveweb H5视频播放器增加对WebRTC的支持

作为liveweb系列产品标配的H5播放器，liveweb近期又增加了新的功能升级，在持续迭代原有对FLV、HLS、WebSocket协议流支持的基础上，不断优化H.264、H

水深无声/ 2023年10月13日 19:31/ 0 赞/ 40 阅读

相关 Android 画中画（视频）

Android 画中画（视频）简介： Android 8.0（API 级别 26）允许以画中画 (PIP) 模式启动 Activity。画中画是一种特殊类型的多窗口模式

怼烎@/ 2022年09月02日 04:29/ 0 赞/ 265 阅读

相关 html5视频播放器

html5 视频音频制作学习的笔记，记录备忘。效果图： ![Center][] 代码： <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年08月19日 08:59/ 0 赞/ 370 阅读

相关播放2个视频的画中画overlay播放器

1、概述引入线程,采用类似互斥锁的机制,让线程与进程交替解码视频. 2、代码 `<script src="https://code.csdn.net/sni

╰半橙微兮°/ 2022年08月05日 07:47/ 0 赞/ 235 阅读

相关 H5视频播放器开发-基础篇

最新更新时间：2019年1月11日15:19:15 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：H5 Video HTML

不念不忘少年蓝@/ 2022年05月19日 03:10/ 0 赞/ 381 阅读

相关 H5视频播放器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>视频</title> <link h

淡淡的烟草味﹌/ 2022年04月22日 13:40/ 0 赞/ 404 阅读

相关 H5视频播放器开发-画中画

最新更新时间：2019年1月11日16:59:54 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：画中画概述 > 画中

红太狼/ 2022年03月27日 02:05/ 0 赞/ 448 阅读

相关 vue项目使用视频播放器 h5视频播放插件

vue项目中需要播放视频，然后网上搜了一下对应的插件，发觉xg-player西瓜播放器用起来不错。开源这个播放器的作者应该是一个超级大牛。特此记录一下这款播放器的使用

客官°小女子只卖身不卖艺/ 2022年02月24日 13:30/ 0 赞/ 1145 阅读

相关 h5 视频

视频 <vedio src="xx" 属性></vedio> 视频属性 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

清疚/ 2021年07月24日 23:13/ 0 赞/ 615 阅读