【技术实现步骤摘要】
基于html网页自定义划分播放窗口的方法及播放组件
[0001]本专利技术涉及视频播放
，具体地说是基于html网页自定义划分播放窗口的方法及播放组件。
技术介绍
[0002]安防监控系统作为一种社会安全保障体系已在日常生活中被广泛应用，随着现代浏览器功能越来越强大，现代浏览器已支持多种主流格式视频的播放，同时网页端应用具有无需额外安装插件、跨平台、易更新的优势。因此监控视频的播放工具正由桌面端软件逐渐转移到浏览器网页中。
[0003]目前基于html网页的监控视频播放系统，播放页面预设几种固定的分屏方案供用户选择使用，无法满足用户自定义划分播放窗口的需求。比如用户使用四等分屏观看四路监控视频时，如果想重点关注其中一路视频，需要放大这一路视频播放窗口，缩小其余三路视频播放窗口，预设固定分屏方案的监控视频播放系统无法满足这一需求。
[0004]如何自定义划分基于网页的视频播放窗口，是需要解决的技术问题。
技术实现思路
[0005]本专利技术的技术任务是针对以上不足，提供基于html网页自定...
【技术保护点】
【技术特征摘要】
1.基于html网页自定义划分播放窗口的方法，其特征在于包括如下步骤：通过自定义播放窗口数量的方式初始化播放组件；基于html5的事件响应机制为播放组件绑定监听事件，包括为行列数输入框绑定数值改变事件、为每个播放窗口绑定鼠标事件和触摸事件，通过行列数输入框事件监听和响应行列数修改操作，通过鼠标事件监听和响应PC端鼠标点击操作，通过触摸事件监听和响应移动端手指碰触操作；播放组件监听到行列数输入框中数值变化后，销毁现有播放窗口DOM元素和已绑定的网页事件，并按照行列数输入框中修改后的数值重新初始化播放组件；播放组件监听到鼠标操作或手指碰触后，执行播放窗口合并操作；播放窗口被合并后，播放组件监听到恢复按钮被触发后，将播放窗口恢复至合并之前的状态。2.根据权利要求1所述的基于html网页自定义划分播放窗口的方法，其特征在于通过自定义播放窗口数量的方式初始化播放组件，包括如下操作：播放组件基于默认的分屏模式初始化操作界面；播放组件读取父容器的宽度和高度，用以计算每个视频播放窗口的宽度和高度，每个播放窗口以CSS的绝对定位方式填充父容器。3.根据权利要求1所述的基于html网页自定义划分播放窗口的方法，其特征在于基于html5的事件响应机制为播放组件绑定监听事件，包括：当前为PC端浏览器时，为每个播放窗口绑定鼠标按下mousedown事件、鼠标移动mousemove事件和鼠标释放mouseup事件；当前为移动端浏览器，为每个播放窗口绑定手指接触屏幕touchstart事件、手指接触屏幕后移动touchmove事件和手指离开屏幕touchend事件。4.根据权利要求1所述的基于html网页自定义划分播放窗口的方法，其特征在于播放组件监听到鼠标操作或手指碰触后，执行播放窗口合并操作，包括：当前为PC端浏览器时，鼠标在某个播放窗口按下时记录窗口的序号ID1，按下状态的鼠标移动到其他播放窗口松开鼠标时，记录当前窗口的序号ID2，如有以ID1和ID2分别为左上角和右下角的矩形区域没有穿过其他窗口内部，则可以进行合并操作，整个矩形选区合并为一个播放窗口；当前为移动端浏览器，手指在某个播放窗口按下时记录窗口的序号ID1，按下状态的手指移动到其他播放窗口松开手指时，记录当前窗口的序号ID2，如有以ID1和ID2分别为左上角和右下角的矩形区域没有穿过其他窗口内部，则可以进行合并操作，整个矩形选区合并为一个播放窗口。5.根据权利要求4所述的基于html网页自定义划分播放窗口的方法，其特征在于每次播放窗口合并操作完成后，将被合并窗口的原始编号以数组的形式存放在新窗口的对象里，用于下一次合并时判断用户选择的区域是否允许合并。6.基于html网页自定义划分播放窗口的播放组件，其特征在于用于执行如权利要求1
‑
5任一项所述的基于html网页自定义划分播放窗口的方法，所述播放组件包括：初始化模块，所述初始化模块...
【专利技术属性】
技术研发人员：张亮，辛超，白玉坤，
申请(专利权)人：山东浪潮新基建科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。