原生API实现视频画中画模式

画中画模式现在已经很常见了，比如：bilibili…，今天我们用原生的API来实现一个画中画。
代码如下所示，配备注释…

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小窗播放</title>
</head>
<body><video id="video" src="资源地址" style="width: 800px;height: 500px;" controls></video><button id="btn">进入画中画模式</button><script>//获取元素var btn=document.querySelector('#btn');var video=document.querySelector('#video');//获得浮动视频窗口的宽度和高度，并调整浮动视频窗口的大小。function printPipWindowDimensions(event){console.log(event.target);}function leave(){console.log("离开");}function enter(){console.log("进入");}//进入画中画触发video.addEventListener('enterpictureinpicture', enter);//离开画中画触发video.addEventListener('leavepictureinpicture', leave);//主函数async function go(){try{//判断是否在画中画中if(video!==document.pictureInPictureElement){//开启画中画await video.requestPictureInPicture()//进入画中画后操作video.requestPictureInPicture().then(PictureInPictureWindow=>{//尺寸大小PictureInPictureWindow.onresize=printPipWindowDimensions;//修改按钮文本btn.innerHTML="退出画中画模式"});}else{//退出画中画模式await document.exitPictureInPicture();btn.innerHTML="进入画中画模式"}}//异常时触发catch(err){alert(err);}finally{  //始终执行console.log("finally called");}}//添加事件btn.addEventListener('click',go);</script>
</body>
</html>

效果：

原生API实现视频画中画模式相关推荐

Chrome 谷歌浏览器设置系统皮肤UI 和视频画中画模式
浏览器要求:Chrome谷歌浏览器稳定版最低要68版本以上,开发版最低要69版本以上谷歌Chrome浏览器开启全新Material Design UI界面在地址栏中输入以下字符串,然后按Enter ...
原生js提供的视频画中画api
经常看视频的朋友可能会遇到视频"画中画"的效果,例如你在看优酷的电视剧,向下滚动看推荐视频或者评论等信息的时候,发现上面的播放视频被屏幕上滚之后遮盖了,右下方出现了一个小视频播放器 ...
javaCV入门指南：调用FFmpeg原生API和JavaCV是如何封装了FFmpeg的音视频操作？
JavaCV入门指南系列: JavaCV入门指南:序章(看完本章后,不想看原理的小伙伴可直接跳转到<快速上手篇>) JavaCV入门指南:调用FFmpeg原生API和JavaCV是如何封装 ...
什么是画中画模式，画中画视频怎么操作
最近有很多朋友在问什么是画中画模式,其实画中画是一种视频内容呈现方式,是指在一部视频在播放的同时,画面中还有小面积区域上同时播放另一部视频,如何剪辑该视频呢?感兴趣的朋友一起来看看吧! 第一步,运行软 ...
Android 8.0 学习（21）---Oreo的画中画模式学习
Android 8.0 Oreo的画中画模式学习本文主要是对谷歌开发者官方微信公众号发布的Android 8.0 Oreo 画中画模式一文的学习记录. 画中画模式Picture-in-pictur ...
Android实现一键开启自由窗口、分屏、画中画模式——画中画模式
转载请注明出处:https://blog.csdn.net/sunmmer123 Android实现一键开启自由窗口.分屏.画中画模式系列一键开启进入自由窗口模式一键开启进入分屏模式一键进入画中 ...
Android实现一键开启自由窗口、分屏、画中画模式——自由窗口模式
转载请注明出处:https://blog.csdn.net/sunmmer123 忙过一段时间后,新需求又来了"多个应用/页面间在不用退出或者切换的情况下,可同时操作" 咋一听是不 ...
Android 画中画模式
画中画支持 Android 8.0(API 级别 26)允许以画中画模式启动 Activity.画中画是一种特殊类型的多窗口模式,最常用于视频播放.使用该模式,用户可以通过固定到屏幕一角的小窗口观看视 ...
Picture-In-Picture 画中画模式
Picture-In-Picture 画中画模式此代码为项目中使用,封装了PlayerView,相关进入PIP模式的代码也是在PlayerView中准备工作 AndroidManifest.xml ...

原生API实现视频画中画模式

原生API实现视频画中画模式相关推荐

最新文章

热门文章