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

红太狼 2022-03-27 02:05 345阅读 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 条评论，345人围观）

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

相关阅读

相关 Android 画中画（视频）

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

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

相关 html5视频播放器

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

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

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

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

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

相关画中画视频叠加视频覆盖 overlay

1 本文实现一个画中画的播放器,如图.即将解码出的一帧pFrameYUV先缩小成pFrameYUV2,然后直接对pFrameYVU进行覆盖. ![Center][]

我就是我/ 2022年08月04日 14:48/ 0 赞/ 167 阅读

相关 h5视频播放

html5提供的有视频播放功能，标签可以使用video demo如下： <div class="video"> <video src="video/Vision

谁借莪１个温暖的怀抱￠/ 2022年08月03日 12:55/ 0 赞/ 262 阅读

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

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

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

相关 H5视频播放器

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

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

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

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

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

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

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

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

相关 h5 视频

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

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