(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210340887.3 (22)申请日 2022.04.02 (71)申请人 山东浪潮新基建科技有限公司 地址 250100 山东省济南市高新区浪潮路 1036号浪潮科技园S02号楼 27楼 (72)发明人 张亮　辛超　白玉坤　 (74)专利代理 机构 济南信达专利事务所有限公 司 37100 专利代理师 潘悦梅 (51)Int.Cl. G06F 16/957(2019.01) G06F 3/0487(2013.01) G06F 3/0488(2022.01) G06F 9/451(2018.01) G06F 9/445(2018.01) (54)发明名称 基于html网页自定义划分播放窗口的方法 及播放组件 (57)摘要 本发明公开了基于html网页自定义划分播 放窗口的方法及播放组件， 属于视频播放技术领 域， 要解决的技术问题为如何自定义划分基于网 页的视频播放窗口。 包括： 通过自定义播放窗口 数量的方式初始化播放组件； 基于html5的事件 响应机制为播放组件绑定监听事件， 包括为行列 数输入框绑定数值改变事件、 为每个播放窗口绑 定鼠标事件和触摸事件； 播放组件监听到行列数 输入框中数值变化后， 销毁现有播放窗口DOM元 素和已绑定的网页事件， 并按照行列数输入框中 修改后的数值重新初始化播放组件； 播放组件监 听到鼠标操作或手指碰触后， 执行播放窗口合并 操作； 播放窗口被合并后， 播放组件监听到恢复 按钮被触发后， 将播放窗口恢复至合并之前的状 态。 权利要求书2页 说明书6页 附图4页 CN 114896530 A 2022.08.12 CN 114896530 A 1.基于html网页自定义划分播 放窗口的方法， 其特 征在于包括如下步骤： 通过自定义 播放窗口数量的方式初始化 播放组件； 基于html5的事件响应机制为播放组件绑定监听事件， 包括为行列数输入框绑定数值 改变事件、 为每个播放窗口绑定鼠标事件和触摸事件， 通过行列数输入框事件监听和响应 行列数修改操作， 通过鼠标事件监听和响应PC端鼠标点击操作， 通过触摸事件监听和响应 移动端手指碰触操作； 播放组件监听到行列数输入框中数值变化后， 销毁现有播放窗口DOM元素和已绑定的 网页事件， 并按照行列数输入框中修改后的数值重新初始化 播放组件； 播放组件监听到鼠标操作或手指碰触后， 执 行播放窗口合并操作； 播放窗口被合并后， 播放组件监听到恢复按钮被触发后， 将播放窗口恢复至合并之前 的状态。 2.根据权利要求1所述的基于html网页自定义划分播放窗口的方法， 其特征在于通过 自定义播放窗口数量的方式初始化 播放组件， 包括如下操作： 播放组件基于默认的分屏模式初始化操作界面； 播放组件读取父容器的宽度和高度， 用以计算每个视频播放窗口的宽度和高度， 每个 播放窗口以CS S的绝对定位方式填充父容器。 3.根据权利要求1所述的基于html网页自定义划分播放窗口的方法， 其特征在于基于 html5的事 件响应机制为 播放组件绑定监听事 件， 包括： 当前为PC端浏览器时， 为每个播放窗口绑定鼠标按下mousedown事件、 鼠标移动 mousemove事 件和鼠标释放mouseup事 件； 当前为移动端浏览器， 为每个播放窗口绑定手指接触屏幕touchstart事件、 手指接触 屏幕后移动touc hmove事件和手指离开屏幕touc hend事件。 4.根据权利要求1所述的基于html网页自定义划分播放窗口的方法， 其特征在于播放 组件监听到鼠标操作或手指碰触后， 执 行播放窗口合并操作， 包括： 当前为PC端浏览器时， 鼠标在某个播放窗口按下时记录窗口的序号ID1， 按下状态的鼠 标移动到其他播放窗口松 开鼠标时， 记录当前窗口的序号ID2， 如有以ID1和ID2分别为左上 角和右下角的矩形区域没有穿过其他窗口内部， 则可以进行合并操作， 整个矩形选区合并 为一个播放窗口； 当前为移动端浏览器， 手指在某个播放窗口按下时记录窗口的序号ID1， 按下状态的手 指移动到其他播放窗口松 开手指时， 记录当前窗口的序号ID2， 如有以ID1和ID2分别为左上 角和右下角的矩形区域没有穿过其他窗口内部， 则可以进行合并操作， 整个矩形选区合并 为一个播放窗口。 5.根据权利要求4所述的基于html网页自定义划分播放窗口的方法， 其特征在于每次 播放窗口合并操作完成后， 将被合并窗口的原始编号以数组的形式存放在新窗口的对象 里， 用于下一次合并时判断用户选择的区域是否允许合并。 6.基于html网页自定义划分播放窗口的播放组件， 其特征在于用于执行如权利要求1 ‑ 5任一项所述的基于 html网页自定义划分播 放窗口的方法， 所述 播放组件包括： 初始化模块， 所述初始化模块用于通过自定义播放 窗口数量的方式初始化对应的播放 组件；权　利　要　求　书 1/2 页 2 CN 114896530 A 2事件绑定模块， 所述事件绑定模块用于基于html5的事件响应机制为播放组件绑定监 听事件， 包括为行列数输入框绑定数值改变事件、 为每个播放窗口绑定鼠标事件和触摸事 件， 通过行列数输入框事件监听和响应行列数修改操作， 通过鼠标事件监听和响应PC端鼠 标点击操作， 通过触摸事 件监听和响应移动端手指碰触操作； 行列数监听响应模块， 所述行列数监听响应模块用于监听行列数输入框中数值的变 化， 监听到行列数输入框中数值变化后， 用于销毁现有播放窗口DOM元素和已绑定的网页事 件， 并按照行列数输入框中修改后的数值重新初始化 播放组件； 合并监听响应模块， 所述合并监听响应模块用于监听鼠标和手指操作， 并在监听到执 行鼠标操作或手指碰触后， 执 行播放窗口合并操作； 窗口恢复模块， 所述 窗口恢复模块用于监 听恢复按钮， 播放窗口被合并后、 窗口恢复模 块监听到恢复按 钮被触发后， 用于将播 放窗口恢复至合并之前的状态。 7.根据权利要求6所述的基于html网页自定义划分播放窗口的播放组件， 其特征在于 所述初始化模块用于通过如下步骤初始化 其对应的播 放组件： 基于默认的分屏模式初始化操作界面； 读取父容器的宽度和高度， 用以计算每个视频播放窗口的宽度和高度， 每个播放窗口 以CSS的绝对定位方式填充父容器。 8.根据权利要求6所述的基于html网页自定义划分播放窗口的播放组件， 其特征在于 所述事件绑定模块用于通过如下步骤为对应的播 放组件绑定监听事 件： 当前为PC端浏览器时， 为每个播放窗口绑定鼠标按下mousedown事件、 鼠标移动 mousemove事 件和鼠标释放mouseup事 件； 当前为移动端浏览器， 为每个播放窗口绑定手指接触屏幕touchstart事件、 手指接触 屏幕后移动touc hmove事件和手指离开屏幕touc hend事件。 9.根据权利要求6所述的基于html网页自定义划分播放窗口的播放组件， 其特征在于 所述合并监听响应模块用于通过如下步骤执 行播放窗口合并操作： 当前为PC端浏览器时， 鼠标在某个播放窗口按下时记录窗口的序号ID1， 按下状态的鼠 标移动到其他播放窗口松 开鼠标时， 记录当前窗口的序号ID2， 如有以ID1和ID2分别为左上 角和右下角的矩形区域没有穿过其他窗口内部， 则可以进行合并操作， 整个矩形选区合并 为一个播放窗口； 当前为移动端浏览器， 手指在某个播放窗口按下时记录窗口的序号ID1， 按下状态的手 指移动到其他播放窗口松 开手指时， 记录当前窗口的序号ID2， 如有以ID1和ID2分别为左上 角和右下角的矩形区域没有穿过其他窗口内部， 则可以进行合并操作， 整个矩形选区合并 为一个播放窗口。 10.根据权利要求9所述的基于html网页自定义划分播放窗口的播放组件， 其特征在于 每次播放窗口合并操作完成后， 所述合并监听响应模块用于将被合并窗口的原始编号以数 组的形式存放在新窗口 的对象里， 用于下一次合并时判断用户选择的区域是否允许合并。权　利　要　求　书 2/2 页 3 CN 114896530 A 3