00:00
好的,我们继续啊,那在实现了这个导航的啊动态效果之后呢,那这节课呢,我们来看另外一个问题啊,大家看啊,我们在现场这儿吧,那上面第一个视频呢,我给大家去播放一下啊,我先把声音往低调一下,好的,那我这点击播放,然后我再点下边,哎,那这个时候呢,大家能看到啊,我我静音一下。大家能看到现在的问题是两个视频它同时可以播放,那这个呢,显然它是有问题的啊,有问题的。嗯,那。我们最终要实现的效果呢,应该是一次只只有一个视频能播放,对吧,那么现在这个问题呢,是小程序啊,它提供的video组件的问题。哎,不是咱的问题,那现在呢,呃,既然他遗留了这个问题啊,我们要用编码的形式呢,去解决一下这个问题。对吧,好了,那现在啊,我们要做的是同时只能有一个视频在播放。
01:02
那也就是说,当我们播放一个新的视频的时候,我们应该要想着去把上一个视频给它关掉。对了吧。哎,那。有这么几个事儿啊,第一我们点击某一个视频的时候,去关掉上一个,首先我是不是不是得知道我点击了这个新的视频。其次我知道了,点击它的时候呢,我得想办法找到上一个视频给它关掉。嗯,那这是我们的一个思路啊好,首先嗯。来到我们的这个官网,那组件这一块呢,我们去找到这个video组件啊,它在媒体组件里面有个video组件。过来,那我们往下翻,那么在这个里面呢,我们去找一个世界。翻到下面它这个标签属性呢,还是挺多的,大家看啊,在这呢,有一个事件叫by play啊,那其实事件名呢,就是play。通过B去绑定,哎,当开始或者继续播放的时候呢,触发这个play事件,哎,那这个呢,其实就是点击播放的事件,我们首先呢,找到咱的video标签。
02:14
来在下边啊,那上面这个呢,我就给大家收起来了,避免看着乱。呃,下面呢,诶,这不是video吗?来,我们同样的给他换一个行啊,然后呢,在他的身上去写。好,那这个时候呢,By tap一下,嗯,在这里呢,我们起个名字吧,就叫它handle play,哎,就是控制播放的回调,然后呢,我们来到对应的GS里面啊,先把样式关掉。啊,我们继续往下写啊,那之前写过的这些呢,我就给它收起来。咱们继续往下,那那现在这个呢,应该是点击嗯,播放的回调,那这呢再给大家加一个啊,还有个是继续播放都会执行。呃。他的回调OK,我们把这个连过来,那在这个回调里面呢,首先呢,我们先做一个打印啊,给他证明一下这个事件会触发,哎,打印这个play好的,那现在呢,来到模拟器里边啊。
03:09
播放。啊,我暂停了,我再播放。是不是都能触发没有问题,好,那事件有了以后呢,哎,我们在这儿呢,整理一下这个思路啊。看这个打印我就不要了,嗯,首先呢啊,我们第一个在点击播放的世界中,对吧,我们需要找到呃,上一个播放。的视频,那然后呢,呃,关闭。呃,在播放新的视频之前,我们需要干嘛啊?关闭上一个啊,正在播放的视频,这是我们的需求。对吧,这是我们的需求啊,不应该叫思路,嗯,OK。那现在呃,我们世界有了没问题对吧,那如何控制或者叫关闭上一视频呢?哎,那这个时候呢,来我们来到官网的API里面啊。
04:09
在API的媒体里边啊,我们往下翻,媒体里边呢,有什么地图呀,图片呀,哎,这有一个视频。那么视频这一块呢,有个video context。来点击一下啊,稍等。嗯,这边呢,正在跳转,好大家看这video context的实例需要通过这个来获取,那么这个实例可以干嘛呢?首先我们拿到一个实例呢,通过ID呢,去跟一个video组件绑定,进而去操作对应的组件。说白了,我们这个实力需要跟一个组件绑定,然后呢就能控制这个。视频了。如控控制它能干嘛了,你比如说下面你们play pass或者stop,哎,播放对吧,暂停包括停止。哎,那有了这个对吧,哎,那有了这个呢,我们就可以去控制视频的播放了,没有问题,好的,那么现在啊,那这个实例呢,是需要通过这个API呢去获取,来我们访问一下。
05:17
嗯,啊,网稍微有点慢啊,稍等一下。好,那这呢,哎,其实很简单,说调用这个方法呢,去创建这个上下文实例,那么这个里边呢,需要传两个参数,一个是idv组件的ID,说白了你得给我你组件标签的ID,我才能去控制你这个组件。哎,这第一个参数,而第二个参数呢,是一个object啊,是一个对象,那么这个呢,说是在自定义组件的情况下呢,我们可以传入当前组件的实例。那现在呢,我们不是自定义组件啊,所以呢,第二个参数呢,我们可以不用传好的,那么现在啊。那这个API有了,那首先我们要做的事情是在创建。
06:01
创建什么呀,创建这个控制啊,Video标签的实例对象。嗯,来是这个方法对吧,那前面呢,我们定一个变量啊,去接收一下啊,那这样呢,我就将它一个video啊context啊去接收一下。那这呢,是需要跟某一个video标签去绑定。对吧,某一个V9标签去绑定我是不是需要他的ID啊,那在这怎么传ID呢?很明显这是一个点击事件的回调,那我们只能是在点击的时候提供当前点击标签的ID不就可以了吗?所以呢,我们想到啊,我们可以向对象去传参嘛,那这个时候呢,在绑定世界的同时呢,我们还应该去传一个ID进来。啊,视频的ID。有没有来我们找到我们当初测试的这个数据。过来。
07:02
大家看啊,在这个里面啊,我们找一下稍等。呃,还是在这个data中啊,Data中呢,我们往下翻一翻啊,因为它的字段比较多呢,我就先给大家把这些杂七杂八的呢收一下。那。啊,这个也收起来啊,这是一个视频的data塔数据,那么在这里面呢,有一个字段呢,叫什么呀,叫VID就是video的ID。这个呢,就是当前这个视频的唯一标识。所以啊,我们可以通过这个个体对象点data塔点什么呀,点vid是不是找到这个ID啊,来写一下啊,那这呢应该是item点德塔点VD呗。哎,那这样的话呢,我们在这边就可以去获取一下啊呃,Let这个V吧,等于什么点,呃,Current target.id。然后我们可以把这种东西是不传进来。啊,没有问题,传进来以后呢,我们可以尝试着通过它呢去。
08:04
不呃,暂停一下视频,或者要停止视频。大家可以想一下,当我们点击的时候,我们是想关掉上一个视频。对吧,那请问我能不能直接通过这个实例呢,直接去调用它的stop方法。你想想看,Stop,这很明显就是停止呗。很明显是停止。对了吧,哎,没有问题,那现在我们想想看,能不能这样做啊,我们看一眼过来。嗯,看着。呃,我这儿点击播放,你会发现播放不了。永远播放不了,哎,那这是为什么呢。哎,可能有的小伙伴已经想到了,那现在啊,我们点击播放的时候,传入的是把我们当前视频标签的ID啊。那么紧接着我们又通过这个实例呢去调stop,是不是相当于把我当前的视频停掉了?
09:01
而我们的需求是什么?那我们的需求是什么?我们需要找到的是上一个播放的视频。说白了,我们得拿到上一个视频的实例,对吧?啊,那这的关键是什么?如何?哎,找到上一个视频的实例对象,那这是关键。那大家也可以想一下啊,在这里大家看着我是这样去做的,那么我这定义个变量。对吧,接收一下这个实例,那请问我能不能把这个东西呢,这个属性呢,添加到瑞身上。可以吧,哎,我添加到race身上,那么意味着我接下来的使用是不是都得通过race去使用。哎,那为什么要添加到瑞身上呢?首先你不管你点击播放还是暂停或者停止,那么当前页面的实例它是不是一直在啊,那这样的话大家看啊,假设。
10:05
我在这儿。我问你,当我第一次点击进来的时候,实力身上有没有这个属性?但并没有。对吧,第一次点击,假设用户第一次访问我们的视频页,然后呢,点击了第一个视频,这个时候啊,走到这一行代码的时候,他身上根本没有这个属性。对吧,那紧接着,呃,我干嘛呢,往下走。是不是给实力身上创建了这个属性呢?那你要注意啊,当前这个实例对象什么?第一个视频的实例。没有问题。对吧,哎,那下边这很明显不能在这儿调用,刚才我们说了在这一定要用什么把当前的关了,哎,那这个不是重点啊,那刚才我们说到这了啊,现在啊,他是第一个视频的实例没有问题,那么紧接着啊,比如说用户点了第二个视频。那是不是又会掉这个回调好走到这一行的时候,我想问一下这个对象是有没有值写数。
11:05
哎,有值对吧,那么有值,你想想看,这个实力是谁的实力。那很明显啊,他是上一个也是第一个视频的实际对象。对的吧,说白了就是之前播放视频的那个实例,哎,那这样的话呢,我们就可以在这去干嘛呢,去调用一下这个stop。而在这做的事情呢,就是去,哎,关闭上一个播放的视频。哎,那这样的话呢,来我们看一眼啊,过来。OK,看着我播放。没有问题。对吧,啊,那现在这呢,不动啊不动呢,呃,这个。我再点一下,这还是视频数据的问题,来我们换一个我看看。呃,现在比较慢,比较慢。来来到现场这啊,我再播放一下大家看啊播放最起码这个我能点击播放,它没有停止啊,现在视频数据在哪吗?那我们先来看这。
12:05
这报了个错啊,说stop of。Stop饭,那这个原因是啥呢?哎,原因是这。当你这个方法of under find的时候,你只要确认这个方法你拼对了啊,那一定是前面对象的问题。哎,这个时候我们要思考一个问题啊,那为什么会报这个错呢?我们第一次进来,他身上根本没有这个属性。那么对应的值是不是find呀?那我们拿一个anti find,再调用stop,那不就报错了吗?所以我们不能简单的这样写,我们什么时候要调用这个stop。那是不是必须这个实力有值呀,说白了就之前点击过。所以啊,大家看我这样去写,当它有值为处,我们再走特别内容。那这样的话呢,它就不会报错了,来我们保存一下啊,再看一眼。
13:02
刷新一下。好的,那视频数据没到啊,那我在这我就不等了,那现在呢,我去点击播放。最起码大家看这不报错了啊,这是啊,这是这个问题啊,而且现在你看我一点击视频播放,它一直在转圈,那这个呢,其实也是一个问题哈,也是一个问题,稍后呢,我们会解决这个问题。这个呢是也是他官方遗留的一个bug。OK,那现在呢,你知道啊,我们到这一步呢,已经解决了这个问题,但是啊,但是我们再来看大家看到现在我这一点击播放。走。我点击播放你看啊啊,或者我们刷新一下,我重新给大家演示一下过来。第一个播放。好,我点第二个,你看上面这个是不是停掉了,没有问题啊,看着很完美,那关键是你看着我把第二个视频我暂停了,我再播放你看。
14:05
它就播放不了了,这边的报错了,是因为我快速的去点击啊,而那个时候呢,视频资源没有加载到而已,这个没有关系啊,但现在的问题是大家看我一点播放就暂停了。哎,那这又是为什么呢?那回到我们的代码。想一下这。那么。你别忘了,我们这个回调什么时候触发,是点击播放和继续播放的时候都会触发。对吧,好假设啊,用户点击的是第一个。视频播放好,那代码走这一行的时候,第一次进来没有值,对不对,紧接着创建一个值。然后呢,创建了一个第一个视频的实例,那么假设用户把第一个视频暂停掉,下次呢又点了个继续播放,那这个时候请问这个实例是吧,正好还是第一个呀。有没有值有值啊,记性播放的时候它实力有值啊,所以呢,它紧接着是不是掉了一个。
15:05
Stop呀,那是不是又把自己停掉了?嗯。我们什么时候要调用stop呀?说白了,我们点击不同视频的时候,是不是要把之前的关掉?所以啊,我们这儿其实还少一个条件,我们一定要确保。我们当前的视频跟之前播放的视频它不是同一个视频,是不是财务部。停止播放。那如何确认它又是一个关键啊,那就是哎,如何来确认我们点击播放的视频。和正在播放的视频不是同一个视频。对吧,那视频的唯一标识什么?就是VID呗。啊,我们可以通过每一个视频的ID首先对比一下,哎,那这个时候大家看我怎么做,那么第一次进来呢,我还是把这个VID呢,我去复制到race身上啊,其实跟刚才的思路了一模一样了。
16:06
那么在这一行代码之前,我拿到的这ID。那不就相相当于是上一次的ID吗?上一次的ID跟这一次进来我拿到的最新的ID1对比不就可以了吗?所以啊,大家看我这样写this.vd。如果说不等等于VD为。啊,同时它有值,我们再去调这个。嗯。那这个时候呢,我们再来看一眼啊,过来。嗯。好页面呢,现在重新去加载。OK,那现在啊,来我点击一下第一个播放,嗯,然后呢,打卡我暂停。我再播放你看就可以了,虽然说这视频资源没到啊,这是因为网络的问题啊,那最起码我们这儿可以了。
17:01
嗯,你不暂停播放都没有问题。好的,那现在呢,第一个是网络的问题,第二个呢,还有就是刚才我说那个bug,我们稍后来解决,那最起码呢,现在呢,我们解决了这个问题。OK,回到我们的代码啊,那可能有的小伙伴看这种模式呢,啊,不是啊,不是很习惯啊,可能有的小伙伴习惯这样写,比如说if判断,如果它为处。哎,我们要干嘛,我们要走里边,那其实呢,我给他分布写呢,就相当于是这样,如果为触那进这个判断呢,我们还得判断这哥们为处,如果他也为处,然后呢,最终一步我们才需要去执行这一行代码。那么这样写跟上面这样写一模一样,一模一样,但是呢,这样写很明显要比上面这个要麻烦一点啊,所以呢,我们习惯了以后呢,我们应该使用上面这种写法。好的,那么这节课呢,我们主要的呃,需求啊,也说我们主要去解决了个什么问题呢。
18:05
嗯,哎,就说多个视频可以同时播放的问题,对吧。啊,这是我们的问题啊,我们一步一步的去解决它啊,在这里呢,我们主要是用到一个API,就create video context创建的实例,通过实例去调用,Stop方法呢去控制。对吧,啊,只不过是我们需要自己呢去设置一些条件而已,而我刚才用到的这种模式啊,就是大家看啊,其实我们每点一个视频,是不是都应该去创建一个实例等一下。可是你会发现我通过把这个始终赋值给瑞身上的一个属性啊,那么不管你点多少个视频,最终瑞身上的,呃,这个属性呢,它只有一个对象,也说只有一个video的对象。然后呢,通过这个啊,通过这个代码的这个顺序,我们是不是能够很好的去找到上一个对象呀,那么这种模式呢,叫什么呀?啊叫GS的一种设计模式,叫单立模式啊单立模式那就是始终呃呃需要创建啊多个对象的呃场景下啊,我们通过一个变量。
19:19
那通过一个变量来接收。那这样的话呢,我们可以始终保持,嗯,只有一个对象对吧,那这样的好处是什么呢?哎,我们可以去节省我们的内存空间啊,这种呢叫单利模式啊,单立模式。嗯,OK,呃,其实设计模式呢有很多,比如说什么工程函数模式呀等等啊,那这儿不清楚的同学呢,也要看一下好的,那这节课呢,我们讲到这。
我来说两句