[发明专利]基于React框架实现的视频自动播放方法及装置

权利要求书

1.一种基于React框架实现的视频自动播放方法，其包括：

封装步骤，将页面中的原视频组件进行封装，得到React视频组件；其中，所述React视频组件具有视频元素的第一指定属性信息；所述第一指定属性信息实例化为视频元素；

获取步骤，利用所述第一指定属性信息获取所有视频元素；其中，获取到的视频元素按照视频元素实例化顺序或页面设置顺序依次保存在数组中；

判断步骤，将获取到的视频元素按照数组中的顺序依次判断各个视频元素中是否有位于所述页面的当前窗口中的视频元素；其中，依次判断各个视频元素的顶部高度值是否小于页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于页面的当前窗口的底部高度值；

播放步骤，若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放；其中，当判断到当前有且仅有一个视频元素位于当前窗口时，将该视频元素播放；当判断到有多个视频元素位于当前窗口时，将首个视频元素进行播放。

2.根据权利要求1所述的方法，其中，所述判断步骤进一步包括：

获取所述页面的当前窗口的顶部高度值和所述页面的当前窗口的自身高度值，并计算得到所述页面的当前窗口的底部高度值；

获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值；

依次判断各个视频元素的顶部高度值是否小于所述页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于所述页面的当前窗口的底部高度值。

3.根据权利要求1或2所述的方法，其中，所述React视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；

所述播放步骤进一步包括：

将所述视频元素的第二指定属性信息修改为播放状态；

根据所述第二指定属性信息调用原视频组件的视频状态修改命令，将所述视频元素的视频状态更改为播放状态。

4.根据权利要求1或2所述的方法，其中，在所述播放步骤之后，所述方法还包括：

监听所述页面的当前窗口中滚动条的滚动事件，判断当前窗口的滚动条是否正在滚动；

若是，将所述视频元素的视频状态更改为暂停状态。

5.根据权利要求4所述的方法，其中，在所述将所述视频元素的视频状态更改为暂停状态后，所述方法还包括：

每间隔预设时间判断当前窗口的滚动条是否停止滚动；

若是，执行所述判断步骤，若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将所述视频元素的视频状态更改为播放状态。

6.根据权利要求5所述的方法，其中，所述若所述判断步骤判断有视频元素位于所述页面的当前窗口中，将所述视频元素的视频状态更改为播放状态进一步包括：

若所述判断步骤判断有视频元素位于所述页面的当前窗口中，且所述视频元素的视频状态为暂停状态，将所述视频元素的视频状态更改为播放状态，使其断点播放。

7.根据权利要求5所述的方法，其中，所述每间隔预设时间判断当前窗口的滚动条是否停止滚动进一步包括：

记录步骤，记录滚动条在当前窗口的初始位置值；

获取当前位置步骤，每间隔预设时间获取滚动条在当前窗口的当前位置值；

判断停止步骤，判断所述初始位置值是否等于所述当前位置值；

若所述判断停止步骤判断所述初始位置值等于所述当前位置值，则判断当前窗口的滚动条停止滚动；

若所述判断停止步骤判断所述初始位置值不等于所述当前位置值，将所述初始位置值更新为当前位置值；循环执行所述获取当前位置步骤和所述判断停止步骤，直至判断所述初始位置值等于所述当前位置值。