40_尚硅谷_h5_视频播放器功能.wmv原创

好，那刚刚我是不是把整个布局给大家搭完了啊，这很有可能是大家第一次这么去画一点是不是啊，就是说第一次稍微有点不熟练啊，没关系，可是你要知道以后我们正式开发当中啊，都是这么句话的等等，而且流程比这个还要复杂，现在拿咱们拿的是什么？考拉。是不是以后咱们就不是光一个什么考拉了啊，命令配置要写不知道多少行，我们可以来看看啊，先得让你们就是有点危机感啊，就是没有危机感，我发现你们就是。来看一下啊。你看光这个配置吧，我们就看这个配置吧。啊，光要引用的库就有这么多。啊，这光是我们引用的库啊，完了还有我们写的配置。嗯。来看一下。

配置在这边啊，这些配置都是不学不学，所以说不学了，来看一下，这你看一下诶啊，这个简单啊，这是开发环境的一个配置看一下。嗯，好像是不是也没有什么。好像是index里面那个配置看一下啊，这些配置都是还是都需要我们去手写的。啊，OK，不应该不应该，只有这么少看，应该是我项目有问题。好再来看啊，比如说324里面啊，或者说我们直接看我们下面的。你看这是要是你的库是不是啊，我们写的配置。啊，我拍了很多配置。好不，你们这些配置啊，这些配置都需要我们银行行的手写啊，那么多配置。

每一个我们都需要去配啊，所以说啊，这个还是比较小的啊，所以说干嘛我们说以后我们啊说过了，从下一个阶段开始的话，是越来越难，越来越难，东西越来越多，越来越多啊，所以说前面基础一定要打，打好基础都打不好，你要学到下面得得哭，真的得哭啊，有些小女孩就是前面好像没有花太多的力气，总觉得前端比较简单啊，就没有花太大的心思去学啊，到了后来发现突然跟不上了啊，真的是很突然一下子发现自己跟不上。啊，这种跟不上是有原因的，你笔记没做好，很多前面的知识点，我们后面在用的时候的话，你压根都不知道我们在干嘛啊，比如说我们后面去用那个animation啊，比如说我们讲完JS高级，我们后面都是用用一些就是JS高级的市场去去去去那个写代码啊，讲到这一块的时候，我们在拓展，你发现你永你永远都听不懂啊，就就是一天一天的一直在累积，累积最终发现哎，学不下去了。

啊，这就是你前面太松了啊，你你们班你们班其实还好，可是你们班面临着很大的问题，你们你们要过一个年。啊，就是过一个年回来状态跟过年前肯定又是不一样的啊，会有一批人可能过完年来就很不适应啊，所以说一定要自己把这个心理准备先做做好啊，那第一个我们写的是布局啊，那做完这个布局我们来看啊哲理好，做完这个布局我们来写这个。零二是吗？这这个功能啊，这样还吓不死的话，那那那我怎办啊功能。都已经就是什么都已经这么强调了，是不是啊，你们还如果还不回家好好整啊，那我就没办法了，好来看一下，好来看一下，现在我们起码得做点功能啊，首先点播放按钮最起码得动嘛，是不是啊，其实大家知道我们点这个播放按钮的时候，你看图片是要去切换的啊，说明干嘛，我们来看一下，说明我们在点的时候就要去加class是不是OK，那我们有两个方法，先把这两个方法什么两个工具类型干嘛拿过来，工具类放到嘴里，我把这两个工具给他拎过来。

哎，这里音视频。啊，不是这个功能电逻辑啊，资源啊，最后我这边有两个工具类啊，这两个工具不知道大家有没有写过，艾特class跟云木克拉有没有写过，学那个正则的时候应该有写过吧？啊，那我直接用了啊这好，其实你不用这个工具类，如果你浏览器进用性要求不高的话，可以用什么拉斯历的吗？我们class list不是有艾达木方法吗？这个是我们自己定义的兼容性比较高的艾class跟木class方法吗？使用到了我们正则表达式面些知识。

懂不懂啊，如果这个东西不会啊，我会给你们一套正则相关的一些视频啊，啊就是在之前半录的啊，可是因为不讲基础了啊，所以说这块视频的话，就是只能给你们自己去看理解吧，啊里面有好多点呢，关于正则这块的点啊，我们来看一下争眼，呃，我们来看一下，现在大家想想，我们说我们需要干嘛，点击它的时候得切换，那是不是先应该把这个按钮拿到，是不是OK，首先不管先我们先拿这个按钮。OK，一个按钮好走，你这个按钮应该是谁啊？是大吗？是吧，找你我们干嘛？八三十掉这个大等于什么？找到这个star ctrl c.star吧，OK，是不是按钮底下了，OK，其实我们前面路径也不用写的太烦，对吧，差不多到了就行。是吧，来一个点把它认识底下的它就可以了，好吧，OK，这里还有谁这知道把咱们也先拿过来，先把这两个按钮干嘛，把这两个按钮功身上的功能写掉，写了重以找到这个道，好，我们说点击这个道之后干嘛，是不是要去切换是吧，啊这音。

好，那我们写到什么就写到这边来吧，是吧，我们这干嘛按钮的逻辑，那一般我们干嘛找一个方形，好这个方个形我们是不是在做播放项，OK，方形叫什么play。是吧，走你。好是吧，好，这里面就是我们的播放器的功能啊，其他的是我们播放器什么布局吧，OK，我们什么功能从这边开写好怎么写好，两个东西是不是已经拿到了啊，可以用什么，它点什么on颗粒，可是好等于什么，是不是首先把这个切换给它做了，我们说切换好做，咱们说是不是搞一个flag，搞一个flag做一个什么一分散就行了，其实这个时候我们不需要回来啊，因为我们这个什么。

想想video上是不是有一个嘛，你是不是能知道我到底是不是暂停了po past，如果为的话代表么意思，如果是的话代表什么意思？如果进入这个判断代表从什么，从哪个状态去哪个状态，如果能进入这个判断，代表从哪个状态去哪个状态，从暂停去播放是不要能进来的话，说明你这个pass出牌。去的话说明现在什么暂停状态吧，暂停上去播放，播放的时候问你显示什么按钮，显示暂停按钮是是老有说啊，这个逻辑好绕疯了，这是不是这才什么哪跟哪了，是不是显示什么暂停按钮，说老师这太烦了，不学了，OK，来看一下啊，点这去干嘛，怎么去这个。

暂停按钮。CTRL来走，你不就是去调它吗，它position嘛是吧，调整什么暂停了不就行了吗。这里是多少？负11嘛，是不是，那我能不能再写个拉。能不能？来看一下。好，谁要？谁呀，大吗？找到这个大。是不是他第一个嘛，是不是，那我能不这么想。如果你有一个点a tr，如果你上有个点X，让你的变成了。复习。然后给他加就行，是不是怎么办。说一下找你我们干嘛，我们说如果你在这边，诶是不是他如果你在这边是暂停了，那我怎么办。

艾特class哪个节点，哪个class是不是哪个节点？不就是大吗？我们看我们这个今天这块给谁啊。我们这个钥匙给了谁了？我们给的是不是就给的是打看我给哪了。上面。还是我们给的这个按钮的是吧，你看我们这个X不是给了按钮，我这边没有写空格吗。连上了吗？指甲是吧？OK，那怎么办？这谁啊，能不能认识不这个知道吗？去加什么A是吧，来看一下。上下折A。报错了。那四大没网。Start we底下的。

电buttons底下的。Web底下的点，Buttons底下的S。啊。那没问题。啊，是不是还多了一场，应该去哪边？嗯，这个就不要了是吧，走。刷一下一点是不是就过来了，你再点的时候干嘛。L是什么？EL干嘛？你不用这我不用我这两个方法，你应该可用什么拉斯吗？拉点remove嘛，只不过那两个兼容性不好嘛，是吧，那么也是this把这个X嘛remove掉是吧，那这个切换这就出来了，你诶。

而你现在断我是不是还我是不是还没开始播，是不是，那我是不是干嘛点上去他得播，怎么让他播。找你是吧，啊刷一下找你停是吧，还得暂停嘛，是吧，点叫什么P有一嘛，是不周年十下周年。是不是就可以了，是不是，可是我发现是不是必须要点到这个按钮上，不是很爽干嘛，最好这个事情不要加给这个按钮，嫁给谁啊啊只能加给这钮，它没有包裹性是不是最好是不是可以看到什么放大一点，整一个什么包裹器什么的，是不是啊，这边咱们咱们没有整是吧，下面咱们都整了吧。

你看这按钮外面是不是都是玻璃层的，那最好这里面也自己去包一层是不是，那这个话我们现在是不是只能直接点到它就行是不是，可是还有一点事情，你点上去他得跑吧，是不是？怎么办，也就是是不是在我这个大点上去，你有跑怎么跑。也就是说你这个粉红色的外吧，是不是要控制它的外，它的外以及这个白白颜色宽left是不是应该等于一个值啊，这个值跟你播放的这个宽碳有没有关系啊，是不是有个比例关系的，是不是我们说怎么办，那我这边看个循环定时器吧。是的，OK，调一个函数码木，我说每隔一秒钟干嘛，我调一个函数嘛，就看这个木怎么写呗。

是吧，他这个木怎么想？这个木子不像我们说应该去改谁？改什么改这个音呢的什么。In什么点掉点left还要等于什么？Deep pink吧，是不是等于什么deep pink点什么？掉点，他们等什么？他们等于什么？他们俩肯定是吗？跟这个video点困他有没关系？他的昆仑你干嘛？除以什么？你的总的时间是不是有人行吗？点有啊有吗？最后你拿到的是不是我现在播放的一个比例，应该要去乘以谁，这个应该乘以三。

是不是你这个滚动条能以你这个小白块能跑的一个最大。是不是最最大几率怎么求，最大几率怎么求，是不是去哪里什么整个的宽啊，整个的宽等于谁啊，是不是那个节点我们有没有拿到它。的。有没拿到包裹去，没拿到吧，是吧，我们去挖什么包裹去死啊。是。是的吧，是吧，看看是不。你看是不是就是这个progress，这这个progress啊，应该拿这个progress宽度减去什么小白块的宽度，这是我这个小白块能跑的一个最大距离，这个最大距离乘以你这个比例，是不是就干嘛你跑到一个实时的距离。

是是在长，是不是这这个比例不是你现在视频所放的时间除以它的总时间吗？是不是有，是不是有这样的一个比例关系的，是不是，那这边应该怎么求，先把这个什么progress给到什么拿到。干是不是，然后呢，他是什么。不是。点横Y减去什么小白派一点OF3这里。还要加什么P是不是，是不来看一下刷一下走是不？我这个秒数给的干嘛，电视干嘛，这个秒数给的太多了，给100毫秒数就比较平滑了九年。

是不是，那没讲，你看他是不是自己往前跑了，跑跑到最后应该要停了吧，是停了，看下你是不是就停了，能没讲OK，那这个是不是就完了。我来问大家一件事情到身上。但想想现在是不是一个暂停的状态，嗯，想想还有什么东西没有做停？是不是停住了？停是不停住了，为什么能停住了？因为你昆仑他没有动了。

是不是啊，是不是你这个空看没有动啊，没有动不就干嘛停住了嘛，可是问你定时机在不在跑。有人问你现在你看现在这个时候电视机跑正不正常正常，我让你停电，磁机该不该跑了，这时候在不在跑，在跑，为什么这个滚动条没有动，我们这个进度条没有动。因为你的昆仑碳没动，所以说我进入条，进入条才没动，可是我这个定时器里面这个回调一直在跑，你是不是应该要清掉它，OK，懂了吗？我去，你去。第一个变量，一个什么tr time等于零嘛，是吧，OK，我说干嘛，我说每次定时机开启的时候，都会给你返回一个啊时间说嘛是吧，干嘛你在这边干嘛，肯定要什么去什么。英特尔吧，是不是把这个什么拎拎进来，是不是找你好。好这个才开关定时器吗，这个时候。

能不能理解，OK，这个这个功能是不是就做完了，那点点它的时候呢，点它的时候是不是你干嘛，你看比如说我放放放点他的时候干嘛，回来吧，重置吧，是不怎办，找到这个什么知道。是吧，OK找到到，咱们是已经拿到了，OK，你干嘛点以该怎么办？应该怎么办？首先我们说你点击这个时候肯定是要暂停的，那你这个逻辑肯定干嘛就拿过来了，一模一样的。是不是左点，我们来看一下好。干嘛说一下走你是吧一点，你看是不是听了，可是他没有回来了，要不要回来，怎么回来。

是不就回来了啊，视频我知道是回来，你你看效果回来了吧，下次再来放的时候了，而且这个图标对吗。点的时候应该变成什么播放状态吧，为什么。This有问题吗？这个this应该是stop，你这个this变成什么stop了吧？你不能查这个this应该什么stop。孙尚香。走起来停，下次再走的时候不能继续。你看下次走势明显是什么继续的吧，你得把视频也调回来怎么办？什么啊，礼帽不就可以了吗？说一下，走，你回来，下次再走，暂停再走暂停再走，停回来不让看蝴蝶走不让看走你停是不是就可以了，那不见那是不是就完了？OK，还有其实还有需求大想。

我点到滚动条上去的时候。我往这一点用户是不是干嘛，我说我想快进到这边，而且用户点上去就是想看是不是，那我是不是滚动条，在点击的时候应该也要出发的时间。啊不，这个什么进度条在点击的时候要求。出发的事件，OK，那什么去拿到金属条吗？你问他个金属条，他应该身上有，他应该身上有个什么时间。点什么哦，定个等一个方形问题，我们应该怎么去做？E肯定是要要的是吧，进入性处理，处理EV等于EV或者E，好，这么玩。

问你，你要点上去肯定是自制成播放状态，就是不管什么样，你停了，我只要点上来肯定是播放状态，所以你这个按钮肯定要切过来的，所以肯定是这个逻辑。一模一样的，不管什么情况之下，是不是只要你点我这个按钮，肯定是要触发这个逻辑了，切记这个要改成。吧，是不是，OK this，是非长吧。是不是然后呢，然后呢。怎么办？大点上去的时候注意或者拖的时候。去。手里是不是我点上就会有个距离的，比如说我点到这边，我应该去哪，去哪个什么比例。

我是不是拿这一段减除以什么？这一段你这个进度条能走的一个最大距离，他们这个比例乘以什么？乘以你这个视频的总总时间。把那个纸给谁着看？是吧，这样的话，你点过来时候我才这边放，你看我现在用这干嘛，要干嘛点不过来啊是吧，OK，你那怎么办。去拿什么？我们，我们要去改什么，改变是什么video点可他。Time应该等于什么？肯定等于V等于什么，就总时间去乘以一个比例，这个比例怎么求？这个比例跟我点的那个位置没关系啊，有是吧，怎么求肯定是拿他这个比例肯定是去除以什么。

他能走的一个最远距离吗？最远距离是不是已经算过了，是不是他。这是不是那个最远距离啊，肯定要去除以这个最远距离吧，只是说你现在这个的距离能不能达到。你现在走的距离不就是我点的那个位置吗？是不是我点那个位置怎么求。点的那个位置怎么求啊，不就是现在就差什么，我点上去这个位置什么。这段距离吗？这距离怎么求？你的X减去你这个进度表是什么？他不就拿到了吗。是不是问你，你这个进度条的of left不就是什么这么长了，是不是你点上去这个距离不就是这边到我是口什吗？你点上去的这个距离减去进度条的欧萨塔left不就是它的这个距离吗？那边讲那怎么办。点上去的距离怎么调？

ED什么？可能X减去什么？能不能用this？是吧，This什么？是不是看一下这里。过来，过来，过来。过来过来过来是不就可了，过来OK。过来停是不是可以了，那我们这边上那些按钮是按钮事件已经做完了，而且他拖的时候这个针是不是应该跟着我。动荡，而且这边是不是还有音量全面什么都还没做呢，是吧，这个时间是不是也还没做呢？啊，这个我们放到明天早上，我们什么第一节课把它全部做完了解吗？好，今天晚上把我先把写到现在的代码要把它写完。

啊，特别是这个布局要自己干嘛敲出来懂不懂啊，这这里面的逻辑你可以先过一过懂不懂，可是这个布局干嘛。你给我写自己干嘛一定要写出来，能理解吗？好的。