封装一个视频组件（可模拟画中画效果）

qpwoeiru96 发布于2021-11-16 11:44 / 2352人阅读

摘要：目录前言前言效果效果效果图效果图代码实现代码实现前言我是用的原生写的这个功能，因此这个组件在等框架中均可使用，例如，我就是用在基于框架项目中的，用来做点击某按钮，弹出视频，模拟画中画效果。

前言：

1.效果：

2.效果图：

3.代码实现

前言：

我是用的原生js写的这个功能，因此这个组件在vue、react、jquery等框架中均可使用，例如，我就是用在基于nuxt.js框架+typescript项目中的，用来做点击某按钮，弹出视频，模拟画中画效果。

1.效果：

1.在页面中可以随意拖拽

2.可以用鼠标动态控制大小，且宽高是按比例放大或缩小

3.点击右上角可以关闭视频

4.点击按钮打开时，自动播放

5.全凭遮罩效果及控制视频弹出位置

ps:处理bug完毕，关闭时声音关不掉。

2.效果图：

3.代码实现

封装组件名为 video.vue

建议：封装为组件后，可以通过vuex传值来控制视频的打开和关闭。

强烈警告：用v-if而不要使用v-show控制此组件的显示隐藏！！！

【如果用v-if不能拖动或者放大缩小，可以用v-show，然后可以设置一个控制音量的小图标，点击的时候让muted为false，高级浏览器默认自动播放时不能有声音，可以通过muted控制】

混合云 idc机房托管如何封装html组件后台封装一个json 一个封装的Ajax类一个账户可添加多少域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/123475.html

企业级Android音视频开发学习路线+项目实战+源码解析(WebRTC Native 源码、X26

摘要：因此，对音视频人才的需求也从小众变成了大众，这更多的是大家对未来市场的预期导致的结果。做个勤奋向上的人，加紧学习，抓住中心，宁精勿杂，宁专勿多。前言如今音视频的...

tomato 2021-11-24 09:38 评论0 收藏0
AVKit 播放（AVFoundation, AVKit, 音视频， Swift 4，配代码）

摘要：播放视频，苹果设计的很简单，代码如下拿一个建立一个实例你的再建立一个实例这里有一个闭包，出现了，再播放。苹果文档上说，用于管理播放器播放的资源的计时和呈现状态。推荐资源苹果文档视频教程大佬博客，本地网络视频播放相关音视频，简单点，上手就用，当然是 AVKit.更加灵活的控制，就要用到 AVFoundation 了。要点：使用资源（一般就是照片库里面的视频，图片，live ph...

Jenny_Tong 2019-06-25 16:56 评论0 收藏0
GitHub 上受欢迎的 Android UI Library 整理二

摘要：通知克服和的限制高仿淘宝微信等热门通知视图通过一行代码实现通知功能工具类轮播框通知全新的通知栏聊天视图简化开发快速创建聊天信息视图聊天视图实现聊天界面基于实际需求做出的灵活可定制的功能模仿饿了么详情页的例子带通知 https://github.com/Tapadoo/Al... ★2528 - 克服Toast和Snackbar的限制https://github.com/wenming...

nifhlheimr 2019-06-25 12:51 评论0 收藏0
从零到一：实现通用一镜到底H5

摘要：最终针对以上需求，我选用了这几个库来实现通用的一镜到底。你可能会问那怎样实现上面说的几种类型的一镜到底实际上，几种类型的不同只是动画变换方式不一样而已。 showImg(https://segmentfault.com/img/bVbm2Kp?w=900&h=500); 写在前面整个2018年都被工作支配，文章自17年就断更了，每次看到有消息提示过往的文章被收藏，或者有人点赞，都不胜...

Crazy_Coder 2019-08-05 15:59 评论0 收藏0
爱奇艺小程序陪你嗨一夏

摘要：只要滑动了就会触发，并且有一个代表当时滑动到第几个。可能有一点笨笨的。前言在炎热的夏天里最美滋滋的事情是什么呢，我觉得当然是宅在家里，吹着空调，吃着零食看电视剧电影里的帅气小哥哥、漂亮小姐姐了！在闲暇时光我会经常用爱奇艺小程序看视频，加上现在已经学习了一段时间小程序了，啪，动手模仿一个爱奇艺视频小程序的念头就产生了。虽然现在还是个小白，但是希望在这趟爱奇艺小程序之旅上为各位乘客朋友...

edagarli 2019-08-22 18:05 评论0 收藏0