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

说明书

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

技术领域

本发明涉及软件领域，具体涉及一种基于React框架实现的视频自动播放方法及装置。

背景技术

视频与图片、文字描述等相比可以更清楚的展示信息，吸引观看者的注意力。因此，在很多应用中均采用了视频方式展示信息。在采用视频方式展示信息时，当视频在应用的当前窗口时，自动播放视频，不需要用户再手动触发播放，提高用户体验与互动效果。

但现有技术中在实现视频自动播放时，视频自动播放的代码受系统框架不同的限制，如安卓系统和IOS系统，在不同系统中需要编写不同的代码实现视频自动播放，导致视频播放代码需要根据系统进行编写，增加了代码开发、调试的人力成本和时间花费。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的基于React框架实现的视频自动播放方法及装置。

根据本发明的一个方面，提供了一种基于React框架实现的视频自动播放方法，其包括：

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

获取步骤，利用第一指定属性信息获取所有视频元素；

判断步骤，依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素；

播放步骤，若判断步骤判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。

可选地，判断步骤进一步包括：

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

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

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

可选地，React视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；

播放步骤进一步包括：

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

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

可选地，在播放步骤之后，方法还包括：

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

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

可选地，在将视频元素的视频状态更改为暂停状态后，方法还包括：

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

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