00:00
好的,我们继续啊,那上一节课呢,我们是解决了这个多个视频啊同时播放的问题。啊,那现在呢,大家再来看一下啊,你比我播放第一个,然后我再播放第二个,嗯,没有问题了,但其实现在呢,视频的播放呢,还不是啊,不是特别的流畅。那这是为什么呢?我们现在呢,来到我们的组件啊,我们找到这个媒体组件里面的video。咱往下翻啊,在小程序官网的啊,这个组件或者API的下面呢,都有一些常见的问题,那么这些常见的问题呢,是我们开发人员在使用他的这个。呃,你比如说组建或者API的时候呢,发现了一些问题,而这些问题呢,如果说有共性的,或者的确存在的问题,那么官方呢,会做出一些解释啊,那大家看这一个。同一个页面存在多个video视频的时候,Video无法正常的播放,一直在加载转圈。那这个呢,其实啊,我们呃之前呢,也看到了对吧?呃,就是说有时候一点播放的这个视频资源加载的很慢呢,它一直在转圈啊,这种体验其实挺差的啊,那到底是为什么呢?大家看着啊,我们去访问一下这个链接,来我们过来看一下。
01:18
好的,那大家看啊,下边这官方做出了回复,说不建议同个页面使用多个video组件。那么建议不超过三个video啊,如果要实现video的列表功能进行优化。如何优化呢?使用image列表,在选中时将image替换成什么呀?Video?那说明啊,我们。现在啊,大家看我们这个,这很明显这个video的列表,我们的视频肯定不止三个,所以啊,的确咱的项目存在这个问题,那么根据他官方的描述呢,就是说我们需要用image图片呢,去代替我们的video。只有在点击播放的时候呢,我们才需要将这个是呃,那个video。
02:04
对吧,标签显示出来,把之前的图片给它替换掉好的,那这个怎么做呢?首先啊来到咱的项目。来到咱的项目,找到咱的video标签,那么在video的同级呢,我们应该去设计一个图片去代替它,那么设计图片之前呢,我们还是先看一下这个video组件啊,咱们往上翻去找一个它里面的一个。属性啊,那先来到这上边啊,大家看这是video组件,那么我们找他身上的一个标签属性来往下翻。嗯,走。一根翻过了来,我们往上找一下啊,是这个。有一个属性呢,叫poster,哎,视频的封面图片。网络资源地址呢,或者是云文件的ID啊,什么叫翻面图片呢?注意啊,平时我们比如说看抖音也好,对吧,看微博也好,里面的视频,那么其实我们上来看到的呢,它并不是视频的第一帧。
03:07
而是之前做好的封面图,那这个时候呢,大家来到我写好这个项目啊,大家看一下现在呢啊,你比如说我们现在看到的是这个。哎,是这个,那现在看到是这张图啊,比如说我一点击播放,你会发现第一帧。第一帧跟我们刚才显示的那个图片并不一样,而现在啊,我们这个项目呢,大家现在看到的这个图片呢,其实就是它的第一帧。就是第一帧,那如果说啊,我们项目中真正的需要做这个视频列表,那么通常呢,我们会设计一个分面图啊,其实在咱们当前项目的数据里面呢,也有分面图来,那这个时候呢,为了让大家看清楚一点呢,我们还是啊去拿一下这个对应的这个数据来,我用URL呢去给大家测试一下,我们在这呢去访问一下啊这呢是local host,哎这个地址,然后呢,我们去找一个视频导航到ID啊过来。
04:08
在这个里面呢,Group啊,我们就找第一个吧,现场下边的过来啊,我们把这个ID填进去走。好的,那这个下边的一个对象呢,它其实就是一个视频的啊这个数据,那么在这个里面呢,啊,我们往下翻一下啊,大家看啊,在这个data中,也就是说每一个个体对象的data塔中呢,有一个conver URL。这个URL呢,其实指的就是它的分面图,那么对应的呢,是一个网络资源的地址,好的,那现在呢,我们先去给它设置一下这个属性,那么对应的属性叫什么呢?叫poster。对吧,那叫poster,来来到我们的项目里面给这个video标签呢,啊,我们去加一个属性啊,叫poster。那么对应的呢?啊,我们需要从HM贝塔中呢,去找到哪个属性呢?叫cover URL来,我们直接给它拿过来。
05:05
好的,那加上了封面图以后呢,来过来,来到咱的项目。我们让他去编译一下,编译一下。啊,那这个时候呢,来啊,我们确认一下啊,我们的poster呢,啊,肯定是嗯加上了,嗯没有问题,好的,那现在啊,来来到我们的项目呢,我们去看一下。大家看到我们就以这个啊美女维密为例是吧,你看我点击播放走。你看这儿的第一帧呢,跟刚才的封面图呢,其实它并不一样,哎,并不一样对吧,那说明哎,我们就成功了。那说明我们就成功了,好了,那这个分面图加上了以后呢,那我们继续啊接下来呢,我们去做这个性能优化,嗯,那性能优化呢,就是啊使用啊这个面图片呢啊,我们去代替谁呀,代替这个V9标签。
06:03
OK。啊,要代替这个video标签啊,这加个空格啊,下面呢,我们应该准备一张图片,那这个图片既然要代替video标签去显示,那么这个图片要显示的内容,它一定是跟video标签上来显示的内容要保持一致才可以。对吧,好,那这个时候我们这要写是啥呢?大家想一下。哎,对,其实就是刚才我们说的这个分面图给到它是不是就可以,哎,没有问题,好的,那现在呢,我们来到我们的相门,我们看一下,这个时候大家看啊,图片出来了,跟video标签这个图片一样,只不过现在这个图片的大小是不是跟这个不一致呀?啊,那这个时候呢,我们需要给这个图片去设置一下它的大小。而它的大小呢,其实。最终要跟我们的video的大小。一致啊,那这个时候呢,我们打开它的样式啊。
07:01
我们找到之前的video的大小是这么大,那其实啊,现在的video跟图片应该一样大的话呢,它俩的用共用的应该是一个样式啊,所以呢,这个时候呢,打卡我这来一个comments。啊,他的类啊,前面这呢,别忘了加一个点好的,那么它对应的大小呢,应该是这么大。对吧,那这个common呢,表示共同的意思啊,我加这个类的目的呢,就是说他俩可以共用,那这个时候呢。Video标签用common image标签呢也用common,它俩是不是就一样大了?好的,我们再来看一下过来。哎,没问题,而且大家要注意啊,用只有video标签上来,这是不是有个这个播放的按钮啊,而图片没有啊,没有问题,那么现在呢,图片跟video是共存的,对吧,我们要想办法呢,同时只显示一个标签,要不然是图片,要不然是video。但那这个时候我们要琢磨一下啊,在上来未播放的时候,我们应该要显示什么,应该要显示这个图片。
08:07
对吧,等到用户一点击这个图片,意味着他想要播放视频,我们再给人家什么切换成这个video标签呀。啊,首先啊,那我们是不是需要用知道用户什么时候点击图片,也就是说需要有一个点击事件,点击的时候我们再考虑如何去把它切换成。Video标签,而且等到你啊,切换到下一个视频的时候,那么上一个视频是不是就不播放了,那这个时候呢,我们应该再把video标签呢,给它干掉,再把谁呀,再把图片显示出来。对吧,来再把图片显示出来啊,没问题,好的,那现在啊,来来到我们的项目里面。那我们要设计一下啊,它俩video标签跟我们的image标签,它俩是互斥的关系,有你没我,有我没你,那也就是说我们需要有一个条件来决定啊,他俩到底谁来写事。
09:09
那这个时候呢,大家看我怎么做啊,我呢来到我们的GS里边,来到我们的data中,我呢在上边呢,我初始化一个video ID默认为空创,那这个呢,去用来标识我们的什么呀,这个视频呢,ID标识。好的。Video的这个标识有了以后啊,那这个时候呢,我去给这个image去绑定一个点击事件啊,刚才我们已经分析了,它呢,应该有一个点击事件。点击的时候对应的应该有个回调,这个时候大家看啊,为了让我们的代码更加简洁的话呢,我会选择让他俩共用一个回调,这呢也用这个handler play。来,那这样的话呢,来到我们的GS里面啊,我们再回顾一下来,把我们之前写的收起来。啊,回顾一下我们的play。
10:01
我们之前呢,是点击video标签的时候,播放和继续播放的时候,是不是会调用它,那么现在点击图片我也让它调用。调用它的目的是啥呢?哎,那这个时候呢,你看我点击图片的时候呢,同样的我给它也传ID。那么这个ID呢,还是传我们当前。视频的ID。但因为他俩呢,在同一个循环个体里面,所以我们是不是都能拿到它里面的ID啊,没有问题。那么有了这个ID呢?来到handler play这我们是不是可以通过event对象拿到这个ID?哎,拿到这个ID,有了视频的ID。啊,我可以干嘛呢。琢磨琢磨啊,有了视频的ID,我可以干嘛?我可以这样做这样一件事情,大家看我去更新这个data中的这个video啊,ID的状态数据,嗯,那就是list.set data,嗯,好的,那么在这里呢,我们应该是video ID对应的应该是这个VD。
11:07
现在我们一点击某一张图片的时候,是不是会将这个视频的ID呢,更新到这个APP等中,我们看一眼走,这是第一个呢,我们画一张走,哎,这是第二个呢,没有问题。那现在意味着我们data中的video ID是不是始终只能保存一个视频的ID呀?哎,有了这个可以干嘛呢?那么到时候我们就可以根据这个我保存的是哪个视频的ID,到时候我是不是就可以把哪个的video标签给它显示出来,那么其他不是的我们就不显示。哎,大家琢磨一下是不是这个道理啊,其他不是的,我们不给他显示好的,那这样的话啊,我们可以干嘛呀,来来到我们的结构里面啊,注意我去加一个判断啊微信is。
12:03
条件判断。对吧,那这个时候我去判断什么呢?我去判断这个video ID是不是和你循环体的对吧,每一个视频的ID相等,如果说我跟谁匹配上了来,我就显示谁,那剩下的一概去显示这个图片,所以呢,这应该用微信。好的,那现在啊,再来到我们的项目,大家看着上来的video ID呢,为空串。看为空串,那空串的话是不会和任何一个视频的ID匹配上,所以啊上来所有显示的其实都是图片。那么当我点击啊,比如说刀郎啊,那这个歌手呢,比较老了,可能有的小伙伴之前呢,也没听过他的歌。哎,什么2002年的第一场雪等等。嗯,来,那现在啊,大家看着啊,我点击一下它走。
13:00
嗯,你看哎,我们刷新一下再看一遍啊。啊,它这个视频大小呢,稍微跟咱设计的宽高不一致啊,所以会出现这个框,你看啊为叠。哎,这不是个视频吗?嗯,这个视频视频出来了啊,怎么能够证明呢,你看这是不是有这个播放的按钮了。对吧,那说明我们是不是切换成功了呀。啊,大家看到这个小黑框是因为什么呀,因为我我们现在啊,我这是这个宽度是我自己去设的啊,自己去设的,因为我是参照着手机上的APP目测档案,我就觉得这样好看,我就给他设计了,那其实实际开发的时候呢,我们这儿的宽高应该是什么?以公司哎UI给大家提供的设计稿为例啊,那个时候呢,我们的设计稿的大小跟这个呃,视频的大小应该是保持一致的。那所以这个也不是什么问题,那现在呢,我们看一下啊,我点击第一个,第一个视频出来了,我点击第二个,第二个视频出来了,而这个时候大家看第一个是不是又切换成图片了呀,那这样的话呢,我们已经很好的去控制了这个图片跟video的交替显示隐藏没有问题。
14:14
那讲到这儿大家能跟得上。啊,再琢磨一遍啊,我呢是通过一个公共的变量去保存我们是某一个视频的ID。那么怎么保存呢?就是点击某一张图片的时候呢,我瞬间把他的ID更新进去。那这样的话呢,Video ID啊,始终只有一个视频的ID,而我这一个视频的ID是谁,我就把谁的video标签显示出来,那么其他的都给它显示图片,而最终的实现呢,我们是通过V-if和V-else实现的。对吧。啊好,那么现在啊,我们虽然说切换了这个图片跟video标签的显示隐藏,但是啊哎,细心的小伙伴已经发现问题了,你看啊,虽然说我这儿呢,可以切换出来,这个你看可以切换出来,但是。
15:09
有啥问题啊?哎,你会发现。我这个视频并不能自动的播放。对吧,那也就是说我们除了要把video标签显示出来,我们还得让它自动播放。那如何去控制它播放呢?那这个时候大家别忘了我们在set data的下边呢,我们还有这个控制微定标签的实例呀。那这个是不是就是当前视频的实例,所以我们在它的下面,我们去调一个什么,让它去播放。就OK了,来,那这个时候呢,我们再来看一遍啊过来。哎,好的Y啊,这个比较火了啊,那我们就看这个来走播放,那这个时候大家看可以自动播放了,而且啊,现在这个视频加载呢,要比我们之前的要流畅一些。
16:03
啊要流畅一些,比如说换第一个走,你看第一个播放了没有问题。啊,那这样的话呢,呃,我们就把这个不能播放的问题也给它解决了,那么整完这个以后呢,回头再看这。我们上一节课呢,费了挺大的劲啊,去给大家说了一下这个,呃,多个视频同时播放的问题,其实现在回过头来看这个问题,因为我们的性能优化反而给规避掉了。你想啊,现在呢,我们在视频列表中一次是不是只有一个视频啊,所以呢,也不存在多个视频同时播放的问题。啊,那其实这样的代码就没啥用了,这个没啥用,这个也没啥用了。对吧,那可能有小伙伴就说了没有,你费这么大劲写这个干嘛呢?哎,其实我们这个性能优化不可能在实际开发中不可能是一步到位的。对吧,一定是先去实现,实现的过程中呢,我们发现可以优化,哎,那我们就优化。
17:01
对吧,而且呢,在讲这个啊,多个视频同时播放的问题的时候呢,主要是想给大家再串一下什么单利模式。OK好,那其实最后一看啊,我们这个播放呢,你会发现问题就比较少了来。啊,就这么几行代码这一行啊,更新一下VID创建实例去播放。对吧,好,那再回到我们的视频列表啊,我们再看一眼。嗯,现在啊,播放没有问题,播放没有问题,注意啊,我再回来。我再回到上一个视频,你会发现它没有自动播放了,需要干嘛?需要我们手动再点击。啊,那这个呢,其实不是咱的问题啊,注意这个是模拟器的问题,那么这个问题呢,在真机上是没有的,也就是说我们在真题上来回的去点,它是可以自动播放的,哎,到时候小伙伴呢,也可以到真机上去测试一下。好,那这节课呢,啊,我们是实现了这个用图片去代替video的,哎,这么一个性能优化方案。
18:06
OK,那这节课呢,我们先讲到这里。
我来说两句