基于React框架实现的视频自动播放方法及装置与流程

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

背景技术：

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

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

技术实现要素：

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

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

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

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

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

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

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

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

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

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

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

播放步骤进一步包括：

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

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

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

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

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

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

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

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

可选地，若判断步骤判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态进一步包括：

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

可选地，每间隔预设时间判断当前窗口的滚动条是否停止滚动进一步包括：

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

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

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

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

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

可选地，在每间隔预设时间判断当前窗口的滚动条是否停止滚动之前，方法还包括：

判断定时执行标记值是否为未执行；

若是，执行记录步骤，设置定时执行标记值为执行中；

在判断停止步骤判断当前窗口的滚动条停止滚动后，方法还包括：

设置定时执行标记值为未执行。

可选地，页面为应用web页面。

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

封装模块，适于将页面中的原视频组件进行封装，得到react视频组件；其中，react视频组件具有视频元素的第一指定属性信息；

获取模块，适于利用第一指定属性信息获取所有视频元素；

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

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

可选地，判断模块进一步适于：

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

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

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

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

播放模块进一步适于：

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

可选地，装置还包括：

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

暂停模块，适于若滚动判断模块判断当前窗口的滚动条正在滚动，将视频元素的视频状态更改为暂停状态。

可选地，装置还包括：

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

重新判断模块，适于若停止滚动判断模块判断当前窗口的滚动条停止滚动，执行判断模块，若判断模块判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态。

可选地，重新判断模块进一步适于：

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

可选地，停止滚动判断模块进一步包括：

记录模块，适于记录滚动条在当前窗口的初始位置值；

获取当前位置模块，适于每间隔预设时间获取滚动条在当前窗口的当前位置值；

判断停止模块，适于判断初始位置值是否等于当前位置值；若初始位置值等于当前位置值，则判断当前窗口的滚动条停止滚动；若判断初始位置值不等于当前位置值，将初始位置值更新为当前位置值；

循环模块，适于循环执行获取当前位置模块和判断停止模块，直至判断初始位置值等于当前位置值。

可选地，停止滚动判断模块进一步包括：

执行判断模块，适于判断定时执行标记值是否为未执行；

第一设置模块，适于若执行判断模块判断定时执行标记值为未执行，执行记录模块，设置定时执行标记值为执行中；

在执行判断停止模块判断当前窗口的滚动条停止滚动后，停止滚动判断模块进一步包括：

第二设置模块，适于设置定时执行标记值为未执行。

可选地，页面为应用web页面。

根据本发明的又一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；

存储器用于存放至少一可执行指令，可执行指令使处理器执行上述基于react框架实现的视频自动播放方法对应的操作。

根据本发明的再一方面，提供了一种计算机存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述基于react框架实现的视频自动播放方法对应的操作。

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

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的基于react框架实现的视频自动播放方法的流程图；

图2示出了根据本发明另一个实施例的基于react框架实现的视频自动播放方法的流程图；

图3示出了根据本发明一个实施例的基于react框架实现的视频自动播放装置的功能框图；

图4示出了根据本发明一个实施例的一种电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的基于react框架实现的视频自动播放方法的流程图。如图1所示，基于react框架实现的视频自动播放方法具体包括如下步骤：

步骤s101，将页面中的原视频组件进行封装，得到react视频组件。

react框架可以不受系统本身框架限制，如安卓系统、ios系统等，均可以使用react框架。在本实施例中，页面以应用的web页面为例进行说明。在移动终端所安装的各应用中，不同系统框架的应用的web页面均可使用react框架实现页面中视频的自动播放。

基于react框架利用如继承、重构等方式对原视频组件进行封装，在保留原视频组件中各个功能实现、属性设置等前提下，将原视频组件封装为基于react框架下react视频组件。其中，react视频组件在实现原视频组件所有功能、属性设置等基础上，添加了视频元素的第一指定属性信息。第一指定属性信息可以方便直接获取到页面中所有的视频元素。具体的，第一指定属性信息为react的ref属性。在视频元素中设置ref属性。<videoref＝{this.refvideo}>。同时，利用如下代码在页面添加视频元素后，对其实例化时，对视频元素的ref属性进行赋值：

refvideo＝(elem)＝>{

this.videoelem＝elem

}

将每个视频元素的ref属性实例化为具体的视频元素。如视频元素aa，对其实例化后，其ref属性赋值为aa，视频元素bb，对其实例化后，其ref属性赋值为bb等。

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

利用react视频组件中第一指定属性信息获取页面中的所有视频元素时，具体的，由于页面中每个视频元素均具有ref属性，利用this.refs可以获取到页面中每个具有ref属性视频元素。如页面中包括了视频元素aa和bb，利用this.refs可以获取视频元素aa和bb。进一步，获取到的视频元素可以保存在一个数组中，按照视频元素实例化顺序或页面设置顺序等顺序依次保存各个视频元素。

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

将获取到的视频元素按照数组中的顺序依次进行判断，具体的，需要判断每个视频元素是否位于页面的当前窗口。

具体的，获取页面的当前窗口的顶部高度值和页面的当前窗口的自身高度值，并计算得到页面的当前窗口的底部高度值。如利用window.pageyoffset或document.documentelement.scrolltop等方法可以获取到当前窗口的顶部高度值，再利用document.documentelement.clientheight方法获取当前窗口的自身高度值。当前窗口的底部高度值等于当前窗口的顶部高度值加上当前窗口的自身高度值。

依次获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值。如视频元素顶部高度值等于视频元素的偏移高度值加上其所有祖先元素(遍历页面中视频元素标签之上的所有其他元素，可以利用如获取视频元素的parents等方法获取视频元素标签之上的其他元素)的偏移高度值。视频元素的自身高度值利用offsetheight方法获取。视频元素的底部高度值等于视频元素的顶部高度值加上视频元素的自身高度值。

依次判断各个视频元素的顶部高度值是否小于页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于页面的当前窗口的底部高度值，当视频元素同时满足上述两个条件时，判断该视频元素位于页面的当前窗口中，执行步骤s104。

步骤s104，将位于当前窗口中的首个视频元素进行播放。

在播放视频元素时，避免多个视频元素同时播放造成页面显示时画面混乱、声音嘈杂等问题，仅将位于当前窗口中的首个视频元素进行播放。当判断到当前有且仅有一个视频元素位于当前窗口时，将该视频元素播放；当判断到有多个视频元素位于当前窗口时，仅将第一个视频元素进行播放；或者，在依次判断时，当判断到有视频元素位于当前窗口时，不再继续判断，将该视频元素进行播放。具体可根据实施情况设置，此处不作限定。

react视频组件还具有用于指定视频元素的视频状态的第二指定属性信息。如在原视频组件的基础上添加command属性，用于指定视频元素的视频状态。在将视频元素进行播放时，先将视频元素的第二指定属性信息修改为播放状态。如将command属性设置为play。再根据第二指定属性信息调用原视频组件的视频状态修改命令，将视频元素的视频状态更改为播放状态。如在react视频组件中可以调用shouldcomponentupdate方法中通过nextprops获取command属性的值，当其值为play时，调用原视频组件中play方法可以实现视频元素的播放。

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

图2示出了根据本发明另一个实施例的基于react框架实现的视频自动播放方法的流程图。如图2所示，基于react框架实现的视频自动播放方法具体包括如下步骤：

步骤s201，将页面中的原视频组件进行封装，得到react视频组件。

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

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

步骤s204，将位于当前窗口中的首个视频元素进行播放。

以上步骤的描述参照图1实施例的描述，在此不再赘述。

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

对滚动条增加监听事件，如增加addeventlistener方法来监听滚动条的滚动事件，当有用户拖动、拉动滚动条或滚动条上下移动等滚动条发生滚动事件时，触发addeventlistener，可以监听到滚动条发生滚动事件，判断当前窗口的滚动条正在滚动，执行步骤s206。

步骤s206，将视频元素的视频状态更改为暂停状态。

由于当前窗口的滚动条发生滚动，可能导致视频元素不会全部位于当前窗口，此时继续播放视频元素对用户而言没有启动显示效果。且在当前窗口滚动过程中，继续播放视频元素显示效果不佳。因此，在判断到当前窗口的滚动条正在滚动时，将视频元素的视频状态更改为暂停状态。具体的，将视频元素的第二指定属性信息修改为暂停状态，将command属性设置为stop。再根据第二指定属性信息调用原视频组件的视频状态修改命令，将视频元素的视频状态更改为暂停状态。在react视频组件中可以调用shouldcomponentupdate方法中通过nextprops获取command属性的值，当其值为stop时，调用原视频组件中stop方法可以实现视频元素的暂停播放。

步骤s207，每间隔预设时间判断当前窗口的滚动条是否停止滚动。

在监听到当前窗口的滚动条发生滚动后，还需要继续判断何时滚动条停止滚动。此处，本步骤在步骤s205判断当前窗口的滚动条正在滚动后，可以利用如滚动条滚动事件的回调函数执行判断当前窗口的滚动条是否停止滚动。

当判断当前窗口的滚动条停止滚动后，重新执行步骤s203，判断是否有视频元素位于页面的当前窗口中，若有，则将视频元素的视频状态更改为播放状态。进一步，若判断有视频元素位于页面的当前窗口中，且视频元素的视频状态为暂停状态，即在滚动条滚动前，视频元素正在播放，当滚动条滚动时，将视频元素的视频状态修改为暂停状态，使其暂停播放。当滚动条停止滚动后，该视频元素还位于页面的当前窗口中，此时，可以将视频元素的视频状态更改为播放状态，使其断点播放。断点播放记录了视频元素暂停播放时的位置，可以使视频元素按照暂停播放时的位置继续往下播放，不再重新从头开始播放。与现有技术中视频元素在更改为播放状态时重新从头播放相比，用户可以继续观看视频元素后面的内容，更符合用户观看习惯，使用户不需要在花费时间重新观看已经观看过的内容，或需要用户手动调节观看进度等，提高用户观看体验效果。

在每间隔预设时间判断当前窗口的滚动条是否停止滚动时，具体的，需要在监听到滚动条的滚动事件后，记录滚动条在当前窗口的初始位置值。再每间隔预设时间获取滚动条在当前窗口的当前位置值。此处，可以利用定时器定时执行，获取滚动条在当前窗口的当前位置值。如建立定时器预设时间间隔为200毫秒。每间隔200毫秒获取一次滚动条在当前窗口的当前位置值。判断初始位置值是否等于当前位置值。若判断初始位置值等于当前位置值，则说明滚动条发生没有滚动，判断当前窗口的滚动条停止滚动。若判断初始位置值不等于当前位置值，即滚动条依然在滚动，则将初始位置值更新为当前位置值。继续利用定时器每间隔预设时间重新获取滚动条在当前窗口的当前位置值，再判断初始位置值是否等于当前位置值，直至判断初始位置值等于当前位置值，即滚动条停止滚动为止。

进一步，在每间隔预设时间判断当前窗口的滚动条是否停止滚动时，为防止滚动条在滚动过程中，判断当前窗口的滚动条是否停止滚动被频繁执行，可以设置定时执行标记值，默认定时执行标记值为未执行。在判断当前窗口的滚动条是否停止时，先检测定时执行标记值是否为未执行。若定时执行标记值为未执行，即当前没有定时器正在处理判断滚动条是否停止滚动。可以记录滚动条在当前窗口的初始位置值，每间隔预设时间获取滚动条在当前窗口的当前位置值时，判断当前窗口的滚动条是否停止滚动。同时，将定时执行标记值设置为执行中。此时，若再有滚动条触发滚动事件，回调函数执行判断当前窗口的滚动条是否停止滚动，由于定时执行标记值为执行中，即当前已经开始判断滚动条是否停止滚动，不再重新建立定时器，仍按照当前已有定时器的计时每预设时间间隔获取滚动条在当前窗口的当前位置值进行判断，避免建立多个定时器重复判断造成资料浪费。在判断当前窗口的滚动条停止滚动后，设置定时执行标记值为未执行，将定时器消除。

根据本发明提供的基于react框架实现的视频自动播放方法，利用react框架，对原视频组件进行封装，使其实现的视频自动播放方法不受系统框架影响，可以实现代码在不同系统复用，减少了人力开发成本，节省了开发时间。同时，对当前窗口的滚动条滚动事件进行监听，当滚动条正在滚动时，暂停视频元素的播放，避免造成在滚动条滚动过程中不良的观看效果。并在滚动条停止滚动后，判断视频元素位于当前窗口中时，将视频元素按照断点播放，不再重新从头开始播放。用户可以继续观看视频元素后面的内容，更符合用户观看习惯，使用户不需要在花费时间重新观看已经观看过的内容，或需要用户手动调节观看进度等，提高用户观看体验效果。

图3示出了根据本发明一个实施例的基于react框架实现的视频自动播放装置的功能框图。如图3所示，基于react框架实现的视频自动播放装置包括如下模块：

封装模块310适于：将页面中的原视频组件进行封装，得到react视频组件；其中，react视频组件具有视频元素的第一指定属性信息。

获取模块320适于：利用第一指定属性信息获取所有视频元素。

判断模块330适于：依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素。

播放模块340适于：若判断模块330判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素进行播放。

可选地，判断模块330进一步适于：获取页面的当前窗口的顶部高度值和页面的当前窗口的自身高度值，并计算得到页面的当前窗口的底部高度值；获取各个视频元素的顶部高度值和各个视频元素的自身高度值，并计算得到各个视频元素的底部高度值；依次判断各个视频元素的顶部高度值是否小于页面的当前窗口的顶部高度值，且各个视频元素的底部高度值是否大于页面的当前窗口的底部高度值。

可选地，react视频组件还具有用于指定视频元素的视频状态的第二指定属性信息；播放模块340进一步适于：将视频元素的第二指定属性信息修改为播放状态；根据第二指定属性信息调用原视频组件的视频状态修改命令，将视频元素的视频状态更改为播放状态。

可选地，装置还包括：滚动判断模块350和暂停模块360。

滚动判断模块350适于：监听页面的当前窗口中滚动条的滚动事件，判断当前窗口的滚动条是否正在滚动。

暂停模块360适于：若滚动判断模块350判断当前窗口的滚动条正在滚动，将视频元素的视频状态更改为暂停状态。

可选地，装置还包括：停止滚动判断模块370和重新判断模块380。

停止滚动判断模块370适于：每间隔预设时间判断当前窗口的滚动条是否停止滚动。

重新判断模块380适于：若停止滚动判断模块370判断当前窗口的滚动条停止滚动，执行判断模块330，若判断模块330判断有视频元素位于页面的当前窗口中，将视频元素的视频状态更改为播放状态。

可选地，重新判断模块380进一步适于：若判断模块330判断有视频元素位于页面的当前窗口中，且视频元素的视频状态为暂停状态，将视频元素的视频状态更改为播放状态，使其断点播放。

可选地，停止滚动判断模块370进一步包括：记录模块371、获取当前位置模块372、判断停止模块373和循环模块374。

记录模块371适于：记录滚动条在当前窗口的初始位置值。

获取当前位置模块372适于：每间隔预设时间获取滚动条在当前窗口的当前位置值。

判断停止模块373适于：判断初始位置值是否等于当前位置值；若初始位置值等于当前位置值，则判断当前窗口的滚动条停止滚动；若判断初始位置值不等于当前位置值，将初始位置值更新为当前位置值。

循环模块374适于：循环执行获取当前位置模块372和判断停止模块373，直至判断初始位置值等于当前位置值。

可选地，停止滚动判断模块370进一步包括：执行判断模块375、第一设置模块376和第二设置模块377。

执行判断模块375适于：判断定时执行标记值是否为未执行。

第一设置模块376适于：若执行判断模块375判断定时执行标记值为未执行，执行记录模块371，设置定时执行标记值为执行中。

第二设置模块377适于：设置定时执行标记值为未执行。

以上各模块的描述参照各方法实施例中对应的描述，在此不再赘述。

根据本发明提供的基于react框架实现的视频自动播放装置，将页面中的原视频组件进行封装，得到react视频组件；其中，react视频组件具有视频元素的第一指定属性信息；利用第一指定属性信息获取所有视频元素；依次判断各个视频元素中是否有位于页面的当前窗口中的视频元素；若判断有视频元素位于页面的当前窗口中，将位于当前窗口中的首个视频元素的视频状态更改为播放状态。本发明利用react框架，对原视频组件进行封装，一方面使其实现的视频自动播放方法不受系统框架影响，可以实现代码在不同系统复用，减少了人力开发成本，节省了开发时间。另一方面利用react视频组件中第一指定属性信息可以一次性获取到所有视频元素，方便对所有视频元素进行判断，并准确确定位于当前窗口中的首个视频元素，进而通过对视频状态的更改实现视频的自动播放。同时，对当前窗口的滚动条滚动事件进行监听，当滚动条正在滚动时，暂停视频元素的播放，避免造成在滚动条滚动过程中不良的观看效果。并在滚动条停止滚动后，判断视频元素位于当前窗口中时，将视频元素按照断点播放，不再重新从头开始播放。用户可以继续观看视频元素后面的内容，更符合用户观看习惯，使用户不需要在花费时间重新观看已经观看过的内容，或需要用户手动调节观看进度等，提高用户观看体验效果。

本申请还提供了一种非易失性计算机存储介质，所述计算机存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的基于react框架实现的视频自动播放方法。

图4示出了根据本发明一个实施例的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图4所示，该电子设备可以包括：处理器(processor)402、通信接口(communicationsinterface)404、存储器(memory)406、以及通信总线408。

其中：

处理器402、通信接口404、以及存储器406通过通信总线408完成相互间的通信。

通信接口404，用于与其它设备比如客户端或其它服务器等的网元通信。

处理器402，用于执行程序410，具体可以执行上述基于react框架实现的视频自动播放方法实施例中的相关步骤。

具体地，程序410可以包括程序代码，该程序代码包括计算机操作指令。

处理器402可能是中央处理器cpu，或者是特定集成电路asic(applicationspecificintegratedcircuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个cpu；也可以是不同类型的处理器，如一个或多个cpu以及一个或多个asic。

存储器406，用于存放程序410。存储器406可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。

程序410具体可以用于使得处理器402执行上述任意方法实施例中的基于react框架实现的视频自动播放方法。程序410中各步骤的具体实现可以参见上述基于react框架实现的视频自动播放实施例中的相应步骤和单元中对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备和模块的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(dsp)来实现根据本发明实施例的基于react框架实现的视频自动播放装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。