基于React框架实现的视频自动播放方法及装置制造方法及图纸

本发明专利技术公开了一种基于React框架实现的视频自动播放方法及装置，方法包括：将页面中的原视频组件进行封装，得到React视频组件；其中，React视频组件具有视频元素的第一指定属性信息；利用第一指定属性信息获取所有视频元素；依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素；若判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素的视频状态更改为播放状态。本发明专利技术利用React框架，对原视频组件进行封装，使其实现的视频自动播放方法不受系统框架影响，实现代码在不同系统复用，减少了人力开发成本，节省了开发时间。且利用React视频组件中第一指定属性信息可以一次性获取到所有视频元素，方便后续判断。

【技术实现步骤摘要】
基于React框架实现的视频自动播放方法及装置
本专利技术涉及软件领域，具体涉及一种基于React框架实现的视频自动播放方法及装置。
技术介绍
视频与图片、文字描述等相比可以更清楚的展示信息，吸引观看者的注意力。因此，在很多应用中均采用了视频方式展示信息。在采用视频方式展示信息时，当视频在应用的当前窗口时，自动播放视频，不需要用户再手动触发播放，提高用户体验与互动效果。但现有技术中在实现视频自动播放时，视频自动播放的代码受系统框架不同的限制，如安卓系统和IOS系统，在不同系统中需要编写不同的代码实现视频自动播放，导致视频播放代码需要根据系统进行编写，增加了代码开发、调试的人力成本和时间花费。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的基于React框架实现的视频自动播放方法及装置。根据本专利技术的一个方面，提供了一种基于React框架实现的视频自动播放方法，其包括：封装步骤，将页面中的原视频组件进行封装，得到React视频组件；其中，React视频组件具有视频元素的第一指定属性信息；获取步骤，利用第一指定属性信息获取所有视频元素；判断步骤，依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素；播放步骤，若判断步骤判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。可选地，判断步骤进一步包括：获取页面的当前窗口的顶部高度值和页面的当前窗口的自身高度值，并计算得到页面的当前窗口的底部高度值；获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值；依次判断各个视频元素的顶部高度值是否小于页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于页面的当前窗口的底部高度值。可选地，React视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；播放步骤进一步包括：将视频元素的第二指定属性信息修改为播放状态；根据第二指定属性信息调用原视频组件的视频状态修改命令，将视频元素的视频状态更改为播放状态。可选地，在播放步骤之后，方法还包括：监听页面的当前窗口中滚动条的滚动事件，判断当前窗口的滚动条是否正在滚动；若是，将视频元素的视频状态更改为暂停状态。可选地，在将视频元素的视频状态更改为暂停状态后，方法还包括：每间隔预设时间判断当前窗口的滚动条是否停止滚动；若是，执行判断步骤，若判断步骤判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态。可选地，若判断步骤判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态进一步包括：若判断步骤判断有视频元素位于页面的当前窗口中，且视频元素的视频状态为暂停状态，将视频元素的视频状态更改为播放状态，使其断点播放。可选地，每间隔预设时间判断当前窗口的滚动条是否停止滚动进一步包括：记录步骤，记录滚动条在当前窗口的初始位置值；获取当前位置步骤，每间隔预设时间获取滚动条在当前窗口的当前位置值；判断停止步骤，判断初始位置值是否等于当前位置值；若判断停止步骤判断初始位置值等于当前位置值，则判断当前窗口的滚动条停止滚动；若判断停止步骤判断初始位置值不等于当前位置值，将初始位置值更新为当前位置值；循环执行获取当前位置步骤和判断停止步骤，直至判断初始位置值等于当前位置值。可选地，在每间隔预设时间判断当前窗口的滚动条是否停止滚动之前，方法还包括：判断定时执行标记值是否为未执行；若是，执行记录步骤，设置定时执行标记值为执行中；在判断停止步骤判断当前窗口的滚动条停止滚动后，方法还包括：设置定时执行标记值为未执行。可选地，页面为应用web页面。根据本专利技术的另一方面，提供了一种基于React框架实现的视频自动播放装置，其包括：封装模块，适于将页面中的原视频组件进行封装，得到React视频组件；其中，React视频组件具有视频元素的第一指定属性信息；获取模块，适于利用第一指定属性信息获取所有视频元素；判断模块，适于依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素；播放模块，适于若判断模块判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。可选地，判断模块进一步适于：获取页面的当前窗口的顶部高度值和页面的当前窗口的自身高度值，并计算得到页面的当前窗口的底部高度值；获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值；依次判断各个视频元素的顶部高度值是否小于页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于页面的当前窗口的底部高度值。可选地，React视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；播放模块进一步适于：将视频元素的第二指定属性信息修改为播放状态；根据第二指定属性信息调用原视频组件的视频状态修改命令，将视频元素的视频状态更改为播放状态。可选地，装置还包括：滚动判断模块，适于监听页面的当前窗口中滚动条的滚动事件，判断当前窗口的滚动条是否正在滚动；暂停模块，适于若滚动判断模块判断当前窗口的滚动条正在滚动，将视频元素的视频状态更改为暂停状态。可选地，装置还包括：停止滚动判断模块，适于每间隔预设时间判断当前窗口的滚动条是否停止滚动；重新判断模块，适于若停止滚动判断模块判断当前窗口的滚动条停止滚动，执行判断模块，若判断模块判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态。可选地，重新判断模块进一步适于：若判断模块判断有视频元素位于页面的当前窗口中，且视频元素的视频状态为暂停状态，将视频元素的视频状态更改为播放状态，使其断点播放。可选地，停止滚动判断模块进一步包括：记录模块，适于记录滚动条在当前窗口的初始位置值；获取当前位置模块，适于每间隔预设时间获取滚动条在当前窗口的当前位置值；判断停止模块，适于判断初始位置值是否等于当前位置值；若初始位置值等于当前位置值，则判断当前窗口的滚动条停止滚动；若判断初始位置值不等于当前位置值，将初始位置值更新为当前位置值；循环模块，适于循环执行获取当前位置模块和判断停止模块，直至判断初始位置值等于当前位置值。可选地，停止滚动判断模块进一步包括：执行判断模块，适于判断定时执行标记值是否为未执行；第一设置模块，适于若执行判断模块判断定时执行标记值为未执行，执行记录模块，设置定时执行标记值为执行中；在执行判断停止模块判断当前窗口的滚动条停止滚动后，停止滚动判断模块进一步包括：第二设置模块，适于设置定时执行标记值为未执行。可选地，页面为应用web页面。根据本专利技术的又一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；存储器用于存放至少一可执行指令，可执行指令使处理器执行上述基于React框架实现的视频自动播放方法对应的操作。根据本专利技术的再一方面，提供了一种计算机存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述基于React框架实现的视频自动播放方法对应的操作。根据本专利技术提供的基于React框架实现的视频自动播放方法及装置，将页面中的原视频组件进行封装，得到React视频组件；其中，React视频组件具有视频元素的第一指定属本文档来自技高网...

【技术保护点】
1.一种基于React框架实现的视频自动播放方法，其包括：封装步骤，将页面中的原视频组件进行封装，得到React视频组件；其中，所述React视频组件具有视频元素的第一指定属性信息；获取步骤，利用所述第一指定属性信息获取所有视频元素；判断步骤，依次判断各个视频元素中是否有位于所述页面的当前窗口中的视频元素；播放步骤，若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。

【技术特征摘要】
1.一种基于React框架实现的视频自动播放方法，其包括：封装步骤，将页面中的原视频组件进行封装，得到React视频组件；其中，所述React视频组件具有视频元素的第一指定属性信息；获取步骤，利用所述第一指定属性信息获取所有视频元素；判断步骤，依次判断各个视频元素中是否有位于所述页面的当前窗口中的视频元素；播放步骤，若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。2.根据权利要求1所述的方法，其中，所述判断步骤进一步包括：获取所述页面的当前窗口的顶部高度值和所述页面的当前窗口的自身高度值，并计算得到所述页面的当前窗口的底部高度值；获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值；依次判断各个视频元素的顶部高度值是否小于所述页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于所述页面的当前窗口的底部高度值。3.根据权利要求1或2所述的方法，其中，所述React视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；所述播放步骤进一步包括：将所述视频元素的第二指定属性信息修改为播放状态；根据所述第二指定属性信息调用原视频组件的视频状态修改命令，将所述视频元素的视频状态更改为播放状态。4.根据权利要求1-3中任一项所述的方法，其中，在所述播放步骤之后，所述方法还包括：监听所述页面的当前窗口中滚动条的滚动事件，判断当前窗口的滚动条是否正在滚动；若是，将所述视频元素的视频状态更改为暂停状态。5.根据权利要求4所述的方法，其中，在所述将所述视频元素的视频状态更改为暂停状态后，所述方法还包括：每间隔预设时间判断当前窗口的滚动条是否停止滚动；若是，执行所述判断步骤，若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将所述视频元素的视频状态更改为播放状态。6.根据权利要求5所述的方法，其中，所述若所述判断步骤判断有视频元...

【专利技术属性】
技术研发人员：高敏，
申请(专利权)人：浙江口碑网络技术有限公司，
类型：发明
国别省市：浙江,33