悬窗播放视频,让你聊天看视频两不误(上)

本文介绍了如何利用vitamio框架实现悬浮窗播放视频的功能。在点击悬窗按钮后,通过启动MediaPlaybackService进入悬浮窗模式。在MediaPlaybackService中根据action创建或销毁UI窗口,利用WindowManager在MyFloatView中显示悬浮界面。同时,文章详细讲解了如何初始化播放器、设置触摸事件以及处理悬浮窗权限的问题。
摘要由CSDN通过智能技术生成

当年的毕业设计拿出来记录一下,实现效果图如下:

这里写图片描述

视频播放用的是vitamio框架。这里只讨论实现悬浮窗播放视频的思路

这里写图片描述

1.点击视频播放器中的悬窗按钮,开启悬窗播放模式。这里启动了一个后台server。
先进入Home桌面,然后启动MediaPlaybackService

        Intent intent = new Intent(); 
        intent.setAction(Intent.ACTION_MAIN);
        intent.addCategory(Intent.CATEGORY_HOME);                 
        startActivity(intent);
        Intent mIntent = new Intent("createUI");
        mIntent.setClass(PlayActivity.this, MediaPlaybackService.class);
        startService(mIntent);

然后我们来看MediaPlaybackService中做了什么
当action为createUI的时候创建UI窗口,当为removeUI的时候销毁窗口

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        if (intent != null) {
            String action = intent.getAction();

            String cmd = intent.getStringExtra("command");

            if ("createUI".equals(action)) {
                createView(this);
            } else if ("removeUI".equals(action)) {

                fView = null;
                sFloatView = null;
            }
        }

        return START_STICKY;
    }

createView方法中实例化MyFloatView并传入一个ViewGroup,并调用showLayoutView。
我们在MyFloatView中做实现悬窗的逻辑用WindowManager。

    public ViewGroup fView;
    MyFloatView sFloatView;  

    private void createView(Context context) {
        if (fView != null) {
            return;
        }

        fView = (ViewGroup) View.inflate(context, R.layout.float_ma
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这是一个前端开发的问题,我会尽力回答你。 首先,你需要在 Vue 组件中使用 Element UI 中的 Dialog 组件来实现弹出悬浮窗口。在你的组件中,你需要引入 Dialog 组件,创建一个按钮,然后在按钮的点击事件中,调用 Dialog 组件的打开方法。 接下来,你需要使用 CSS 来自由移动和调整大小悬浮窗口,同时确保悬浮窗口不影响背景页面的查看。你可以使用绝对定位和 z-index 属性来实现这一点。 最后,你需要监听背景页面的 TAB 页切换事件,并随着 TAB 页的切换来移动悬浮窗口。你可以使用 Vue 的 watch 属性来监听 TAB 页的切换事件,并在回调函数中更新悬浮窗口的位置。 下面是一个简单的示例代码,供你参考: ```vue <template> <div> <el-button type="primary" @click="openDialog">新标签</el-button> <el-dialog title="新标签" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false" :custom-class="'dialog-style'" > <p>这是一个新标签</p> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, dialogX: 0, dialogY: 0, dialogWidth: 400, dialogHeight: 300, }; }, methods: { openDialog() { this.dialogVisible = true; }, closeDialog() { this.dialogVisible = false; }, handleMove(e) { this.dialogX = e.clientX - this.offsetX; this.dialogY = e.clientY - this.offsetY; }, handleResize(e) { this.dialogWidth = e.clientX - this.dialogX; this.dialogHeight = e.clientY - this.dialogY; }, }, watch: { '$route': function (newVal, oldVal) { if (this.dialogVisible) { // 移动悬浮窗口到新的 TAB 页 this.dialogX += (oldVal.index - newVal.index) * 100; } } }, mounted() { // 初始化悬浮窗口的位置和大小 this.dialogX = window.innerWidth / 2 - this.dialogWidth / 2; this.dialogY = window.innerHeight / 2 - this.dialogHeight / 2; // 绑定悬浮窗口的移动和调整大小事件 this.$nextTick(() => { const dialogTitle = document.querySelector('.dialog-style .el-dialog__header'); dialogTitle.addEventListener('mousedown', e => { this.offsetX = e.clientX - this.dialogX; this.offsetY = e.clientY - this.dialogY; document.addEventListener('mousemove', this.handleMove); }); document.addEventListener('mouseup', () => { document.removeEventListener('mousemove', this.handleMove); }); const dialogResize = document.querySelector('.dialog-style .el-dialog__footer'); dialogResize.addEventListener('mousedown', e => { this.offsetX = e.clientX - this.dialogWidth; this.offsetY = e.clientY - this.dialogHeight; document.addEventListener('mousemove', this.handleResize); }); document.addEventListener('mouseup', () => { document.removeEventListener('mousemove', this.handleResize); }); }); } }; </script> <style scoped> .dialog-style { position: absolute; z-index: 9999; top: {{ dialogY }}px; left: {{ dialogX }}px; width: {{ dialogWidth }}px; height: {{ dialogHeight }}px; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值