00:00
好的,我们继续啊,那上一节课呢,哎,我们是去把这个列表的功能呢啊,咱们也做完了,那这节课呢,我们继续来看啊,大家看着我们,比如说我现在去播放一个视频啊,这个视频呢,比较劲爆一点啊,然后呢,大家看啊,我们稍等一会儿,嗯,一边盯着美女呢,一边等一下这个时间,好的,那现在呢,这个视频我切换一下。来刚才那个视频呢,大概播放了九秒多,那如果说用户再切换回来呢,零再播放的时候,哎,看需求啊,如果说我们要求是从上一次播放的位置继续播放的话,那么应该从九秒的位置播放。但是现在呢,很明显是不从这个位置一直重新开始播放啊,那这也是一个问题,那么为什么会出现这个问题呢?因为现在呢,我们用image标签呢,去做了那个性能优化。对吧,那等到我再次点击回来的时候,是不是相当于是重新去加载的这个video标签呀。
01:02
哎,重新加载这个video标签。那这样的话,相当于是把它播放的时间重新初始化了,所以啊,呃,我们要解决这个问题啊,要解决这个问题OK。呃,那么现在呢?呃,如何去解决这个问题?首先当我们再次切换回来当前的视频的时候。我们是不是要知道这个视频之前有没有播放过?如果播放过。他播放了多长时间,如果是知道了这个时间,我们就能想办法。对吧,让他。到达指定的位置开始播放,那么现在呢,我们先来到这个API这一块啊,嗯,找到啊,我们之前操作视频那个API。往下video context往下翻,大家看这有一个think。哎,跳转到指定的位置,那这个时候呢,我们已经知道了,好这个API呢,可以帮我们跳转到指定的位置。
02:03
对吧,哎,没有问题。要传的是个number,其实就是时间。嗯,那对应的呢,我们都可以去看一下来,那这呢是一个详细的说明啊,跳转到指定的位置没有问题单位啊,注意单位是秒。好了,那现在啊,我们知道有这样一个API了,那那现在呢,来到我们的项目,只要我们啊,刚才这个现在说的有点多啊,主要是被这个美女干扰的啊,来我们整理一下思路,继续啊。我们只需要知道某一个视频它的播放时间,我们就可以跳转到指定的位置,对不对?那这个时候大家想啊,我们是一个视频的列表,每一个视频是不是都有可能被播放。那。你想想看,接下来我们要怎么样去设计,首先我们需要整一个数据呢,去保存一下之前视频播放的这个。时长对吧,那你想想看,如何去标识一个视频的时长。
03:07
第一啊,我们知道啊,我们肯定得知道他之前播放的时间是time呗。时间,我们要知道,那光有时间够不够。光有时间其实不够,我们光知道有一个视频播放了这么长时间,但是我们并不知道是哪个视频,所以啊,除了time,我们还需要知道一个东西,那就是当前视频的视频ID,就是VID。那么通过这两个字段能够标识一个视频的播放时长,所以啊,那针对于某一个视频呢,我们应该整合的是一个对象里边有两个字段。对吧,一个是time时间,一个是vid视频ID。哎,那一个视频是一个对象,那么多个视频是不是需要多个对象呀,所以啊,最终我们应该是什么,应该是一个数组去保存这个数据,好的,那这个时候呢,大家看啊,我们来到GS里边。
04:03
嗯,过来来,那么在这里呢啊,我去设置一个初始值啊,比如说我的,呃,我就叫他一个video update吧。Update time video更新的时间啊,我们初始化为一个数组,那这个呢,用来去记录啊,我们video啊,播放的时长。嗯,可以吧,好,初始化的数据有了,那么接下来我们只需要在视频播放的时候拿到它的时间,然后去更新到这里面是不是就可以了。OK,好,那如何知道视频实时播放的时间呢?那我们还需要来到我们的组件里边。找到我们的媒体组件啊,找到我们的video标签。那在这里呢,我们往下翻一翻啊,我们去找一个事件,事件呢在下边啊走往下翻,来这里呢,有一个事件呢,叫bad time update。那对应的呢,是播放进度发生变化时触发点detail啊,是一个对象,也就说在事件回调中有个detail详情属性。
05:08
这个对象里面大家看有啥current time。Current time其实就是视频播放的时长,那这个时候来我们看一眼,首先我们需要给这个video组件。哎,我们去绑定一个世界是他那么对应的呢啊,我们起一个回调的名字啊,那就handler啊,处理这个时间更新的一个回调呗。然后啊,我们到GS里边去定义一下。来,先把这个收起来,我们继续往下走,那这个呢,是啊,用来去接听啊,我们这个视频,嗯,播放的,播放进度的回调,这样描述啊,更贴切一点,来过来。好的,那么在这个里面呢,啊,他说了有个event对不对,我们把这个event呢,给大家输出一下,往下面走,好的,现在呢,来来到我们的模拟器里面。
06:03
嗯,重新编译一下。嗯,刚才那个美女没有了是吧,好,那现在呢,我们的思路啊,应该更加的集中一些,来,我们去播放一个视频吧,嗯,就这个吧,走来那这边再播放啊,我停止一下,大家看在它播放的过程中呢,我们打印了。很多疑问对象,那说明这个是随着你的播放实时在记录对吧?过来到detail里边我们看一下,诶,这的确有个current time叫时间啊,对应的是二点几。那么这个二点几很明显,它的单位呢是什么?是秒,这的时间呢,对应的是这儿的时间。嗯,两秒多一点,没有问题。嗯,下面的是延迟啊,延迟就加载这个视频数据的时候,延迟的这个时长,那这个呢,肯定不是秒啊,肯定不是秒。对吧,那我们重点的去关注一下上面这个。好的,那当前的current time我们可以拿到。
07:05
那在这个里面呢,我们还需要整合一个数据,其实就是我们的视频ID,视频ID我们过来看看有没有啊,其实在这个里面呢,Current target我们是能够拿到的。这不是什么点ID。哎,为什么这里面有ID呢?那你别忘了,当初我们在视频标签上呢,是不是传了一个ID属性放到这。这个ID里面传的是不是就是视频ID啊。好,哎,那这样的话呢,你会发现万事俱备了。时间也有,ID也有,所以呢,我们可以整合一个对象啊,那个video time OB解码。好的,那它呢,应该等一个对象啊,首先我们记录一下这个视频,ID是点哎current target点什么呀,ID。同时呢,我们去收收录一下这个时长time是点detail点。对吧,哎,点什么呀,那就是current time,根据刚才我们的啊这个打印我们能够拿到它。
08:05
嗯,那么这个对象有了,我们要干嘛?对象有了,我们要干嘛?我们是不是需要将这个对象里面保存的数据呢,放到我们这个数组里啊?那可能有的小伙伴就说了,简单。直接去给他push进去就好了,但是呢啊,我们要考虑的周全一点啊,你想想看你能不能直接push啊,我给大家看一眼。来首先啊,那我们可以拿到那个之前那个数组。从哪来了?从这个data中data数组呢,叫video update this time是这个对吧?那现在如果说我们要去push的话,那push谁啊?Push这个video time OB比较简单,Push完那首先我们肯定能想到要做一件事情,就是将这个数组。是不是要更新一下。好,那我们先这样做啊,我们来看一眼。来这边呢,重新加载了啊,没有问题,好来到AP中啊,大家看初始化的数组是个空数组,没问题,那现在呢,我去播放,那这个时候我暂停。
09:12
好的,你看着啊,随着这个视频的播放呢,我们这儿push了很多个对象。但是呢,每一个对象你展开去看,你会发现他的视频ID一样。那这个肯定是有问题的。我们一个视频的播放数据应该只对应的有一个对象就够了,我需要反复去push制吗?那肯定不行,你这样push制的话,我告诉你这个数组最终体量太大了,而且有多个重复的VIP的对象。对吧。啊,那这是问题,那如何解决这个问题呢?那我们需要思考。思考什么呢?你push之前呢,你一定要考虑我这个数组中之前有没有记录过你这个对象,如果记录过,我还直接push什么。
10:01
当然不是,所以呢啊,我们需要去判断,哎,判断什么呢?判断我们那个记录啊,播放时长的数组中。播放的时长。哪个数组呢?这个video of this time数组中是否有当前视频的什么播放记录?对吧。啊,如果有我们要干嘛,如果没有我们要干嘛。那要来我给大家整理一下这个思路吧,我们这样来这样去做一个笔记啊好的,那现在呢,来我们这儿呢,来一个思路整理,嗯,是他,哎那两种情况,如果有,那我们需要在原有的播放,嗯。记录中对吧,修改这个播放时间是不是就可以了,修改播放的时间为啊当前的播放时间,嗯,那如果没有呢?啊,我们需要啊在数组中是吧?添加啊当前视频的啊那个播放对象。
11:12
对吧,这是我们的思路。好了,那么现在啊,我们如何去判断?我怎么知道?我们这个对象在之前的数组里面有。也比较简单啊,看着我怎么去写这个video item等于我们之前这个数组,我通过find去找一个对象。怎么找呢?我就是看我最幸福的对象在不在之前的数组里面,那那这个时候呢,我们可以通过一个条件判断,那就是如果有啊,那么之前的对象里面是不是应该就有这个VD属性。那现在呢?我只需要拿数组里面哎个体的VD和我们当前即将要存放的视频的VD去匹配,如果相等什么说明有?如果不相等,那返回值是点范围。
12:02
对吧,所以啊,我们去判断,如果它为处。那说明啥,那说明之前有,嗯,之前有我们要干嘛,那其实就是我们在之前对象这个时间的基础上,那就是current time,我们是不是直接修改成当前我们这个对象的啊current time就可以了。对吧,啊,你写他也可以啊,你或者说你写这个啊啊啊,可能理解的更透彻一点啊,那这个是吧,我们拿到的最新的时长。没有问题,那么如果没有,那就是else。啊,那这个呢,是之前没有,之前没有的话,我们要干嘛,我们要将这个给它push进去。啊,不管说你是修改时间呀,还是直接push呀,那么最终你别忘了我们是不是要统一啊去更新。哎,更新什么呢?更新这个video update的状态,好的,那现在啊,我们再来看一下,来来到我们的项目中。
13:07
来出什么呢?还是没空没有问题,那现在我点击一个不放,那来让他走着好,我停一下,现在呢是多少呢?来大家看啊,三秒多一点对吧,那这个时候呢,我们看啊,首先我们记录这个播放时长的数组中只有一个对象。然后我们看一下它里边的时长,诶三秒多,那其实展开看的话,你看的更清楚一点,走这边的时间是吧,一直在变,只要我这一停,这儿的记录就停止。对吧,好的,那现在呢,我们再换一个视频走来,那这个时候大家看这是不是又多了一个对象,而且呢,我们在动态的更更新这个视频对象的时长。没有问题。好,那这样的话,我们是不是能够很好的去记录我们某一个视频的播放时长呀,那么记录的目的是啥?
14:05
目的是为了下一次你点击播放的时候,我们要判断在你正式播放之前,我们要干嘛,我们一定要判断一下。那你之前到底有没有模仿过?对吧,如果播放过我是不是要跳转到指定的位置呀,好的,那现在呢,来我们在这儿呢,啊,还是要去做一个判断啊,判断当前的视频。嗯,之前对吧,是否播放过,或者叫是否有播放记录呗。对吧,如果有。哎哎,如果有那么干嘛呢?啊,就跳转至指定的播放位置。好的,那如何去判断?也比较简单,我们还是要通过这个视频的ID。我们有就是什么,你点击播放我们当前这个回调中,是不是能够拿到当前视频的vid。
15:05
我们拿这个VD呢,就能去,哎,那个记录播放时长的数组中,是不是找有没有相关的对象呀,那这个时候大家看啊,我还是来一个video AR吧,嗯。哎,它呢,应该等于什么呀。想想刚才我们已经做过了啊,那这个时候呢,我们是不是应该从他之前的对象中呢,我们去把那个数组呢,给它拎出来啊,所以啊,我们在上面我还是从这个贝塔中呢,把这个video。什么呀,After this time这个数组拎出来,通过这个数组啊,我们去查找,找什么呢?找这个HM中的VD是否有跟我当前视频vid相等的。这个对象对吧?啊,如果有。也是他没处,我们要干嘛,那这个时候呢,我们要通过这个控制视频播放的实例对象。
16:03
我们是不是调用那个,刚才看到那个方法叫think。去跳转,而且啊大家看啊,我们刚才已经看到了,这记录的时间是不是秒。而刚才我们看这个API think要求的时间是不是正好也是秒,所以啊,我们也不需要去转化成时间单位,那直接就是从这个记录的对象中,我们是不是把那个current time拎出来就好了。对了吧,好的,那这个时候啊,我们再来看一遍。来。啊。来这个吧,哎,看美女看的多了啊,这个思路就容易乱好了,那现在啊,大家看着第二个啊,我这抗议点击播放,好,这边在播放,我们等一下啊,等几秒。嗯,提亮啊,六秒应该是六秒多一点,对不对,没有问题,那这个时候呢,我先切换到下一个没问题,好的,我再来到上一个。
17:02
啊,这个模拟器上啊,我们说了再切回来,它不自动播放啊,我们需要点一下走。你看从哪开始的,是不是从六秒多开始的,没有问题啊,那这个这个。那在真理上的体验呢,会更流畅一点啊,会更流畅一点。好的,那现在呢,我们是利用啊这个监听。视频的实时播放去记录了一下,那这个视频播放的时间呢?我们是干嘛存到了data中。对吧,然后再次播放的时候呢,我们从data中去读,如果有播放记录我们就给他。跳转到指定的位置。好的,那这样的话呢,哎,我们实现这个功能了,那这个时候呢,大家要注意。我们还有什么没有考虑到的?那现在呢,是我只要一点击播放,我们是不是就往里面存了一个对象呀,那假设这个视频播放结束了呢。
18:08
那下一次再点过来,他一定是重新开始了吧,那这个时候你觉得。我们要不要做点什么?哎,对,如果是视频自动就是播放结束了,那么之前存到这里面的对象。其实就没必要留了。对吧,我们一定要把它移除了,否则的话,这个数组里边的嫩撒堆积的越来越大。啊,那怎么知道这个视频播放结束呢,那这个时候呢,我们来到官网,来到组件这一块啊,我们来到媒体组件呢,找到video。啊,往下翻,那播放结束一定是世界了,我们往下看,看看有没有。这,哎,有一个事件呢,叫bad ended,当播放到末尾时触发。对吧,好的,那么现在。来,首先呢,我们要给这个video呢,去绑定一个世界是find and,那这儿呢,我们来一个handler这个end吧。
19:08
那视频播放结束的时候调用来。我们继续往下走。嗯,那这个是视频播放结束调用。再掉一掉。啊,把这个丢过来来放到这里好了,那为了证明啊,没问题啊,我们先来个播放结束的打印测试一下。来了咱的项目。OK,那现在呢,就第一个吧,走好,那这个时候呢,我们来到打印这一块啊,大家看着我直接来到结束看没问题,哎,这个世界是不是可以出发。好的,那事件触发,你想想看啊,我们在结束的时候,我们要干嘛呀,我们是不是应该去移除。啊,这个记录啊,这个时长的记录,这个播放时长数组中啊,当前视频的这个对象。
20:12
对的吧。啊,首先呢,我们还是得把那个数组是不是拎出来。没有问题。啊,那么对应的那个数组呢,叫video time,那从数组中要移除一个对象呢?我们用到的方法是lie。首先要移除几个,肯定是一个对吧,那关键是前边我们是不是得找到对应的下标呀。对应的下标,我怎么能够找到对应的下标呢?那这个时候呢,我们在这儿呢,可以通过event去找,通过ID去找吗。对吧,也可以啊,在data中呢,我们是不是直接就有这个视频IDID。那那在这里面我们是不是没有从啊,没有从啊,没有从就简单了,那因为之前这个VD呢,我们在哪呢,是不是在在这个play里面,那在这儿是拿不到的,拿不到的话呢,我们还是利用这个疑问对象。
21:03
对吧,因为对象中我们跟上边是一样的啊,我们是不是通过这个target.id。我们可以找到这个。视频的ID啊,有了ID我们干嘛?我们要去找这个数组里边某一项的下标怎么找?那你想想看。首先数组要找原数的下标,我们是不是要可以通过这个find index去找?对吧,那find index是不是要放某一个元素呀?啊,我们要找的元素是谁呢?想想看要找的元素是谁?那其实就是这个item。对吧,im.vd啊等等于我们当前点。嗯,然后呢,Current target点。ID这个元素的下标呗,哎,Find index呢会返回。
22:01
某一个元素的下标呗,所以啊,大家看这最终这一行代码是不是能够找到当前元素的下标。找到这个下标,我是不是可以放到这儿。对了不啊,那刚才分布式呢,是怕大家一下看不清楚啊,我是在外边写的,这那最终呢,其实我们一行大板就搞定了。那么移除了以后呢,你别忘了要干嘛,我们还是要去更新一下这个状态啊,点S在这里啊,我们去更新一下谁更新一下这个数组。OK。来,那这的分号呢,加上啊,那现在呢,我们去测试一下我们的代码有没有问题,好,那这个时候呢,来过来。嗯,上来没有对吧,啊,我们去播放一下,好,这有一个对象啊,注意我现在人为的把它直接调到最后去。大家看这里面还有吗?没有了,哎,是不是又移除掉了啊,那你再播放,这是不是又有了,等到播放结束又移除。
23:06
啊,没有问题,那说明咱的逻辑是通的啊,是通的啊,这里呢,就是看大家做一个项目的时候呢,是否考虑周到。嗯,所以呢,我们给它加了一个结束的时候移除这个对象的啊这个功能来,那这一节课呢,我们讲到这啊,那我把这些打印呢,就给它删掉了,要不然控制台它一直有。好,我先把这个视频停一下。
我来说两句