44_尚硅谷_h5_视频与canvas相结合.wmv原创

刚刚我们实现了个播放器，是不是，那在实现这个播放器的时候啊，里面的细节的东西比较多，自己稍微去注意一下啊，OK，然后讲最后一点就是视频跟开发相结合起来，视频约开斯。结合，OK，那想想我们看看是怎么做。我们来写个canvas。首先写卡S还。记不记怎么写index ID？好，我们来写个看吧，比如说来写个画布，看是不是ID，我就叫OC。300吧，还也是300 OK，怎么写温度点什么？哦，漏掉啊，这个好听啊，一个新的知识点完全是可以会的，这个点什么。

我应该去拿什么个什么，应该什么document点什么，找到这个什么。OC是吧？找到是吧怎办？oc.get context是不是OK，拿到一个啊，画笔CX应该等什么？oc.get context2d是吧？OK，比如说干嘛，那现在我们说去换个。嗯，现在画剧情的话，是不是待会CX啊，好这样，那我们再来一个，我们说再来一个V6表情是吧，OKV。Do，是吧，Video给个就给SC，我们说这个src就给我们这个播放器的地址。

C。好，我去拿这个地址，CTRLCTRL打开来看一下。现在不这样的是吧？OK，我让这个播放器变美怎么办？外啊DT吗？外等于零是不行，H也等于是不是，那是不是就没了？好，现在我说画布，画布，我就把它当成一张影布。我在这个画布上面去放电影，这个video就是放映机。就真正的一帧一帧的，我全部放到什么。上面去看怎么做，我可以忘一个什么VI video等于什么document，点什么Q，我去找到这个什么。

OK，然后干嘛，我们说里面就是一针一帧嘛，你可以把里面东西想象的就是图片。那怎么办？怎么放上去啊。怎么去怎么去引用图片呢。CTx.join image，其实他第一个参数之前是不是传的图片可以传一个video OK，从哪开始，零零位置开始。这个行不行？OKY等于多少？的话就。OC点跟什么OC点。教你。看一下现在有吗。那个妹妹没有可能没加载完吗。

是不是啊，你们可能没加载完。那怎么办？点什么？呢？第一针叫什么？漏什么的，对什么，来一个方形找你来看，可不可以说下是不是就出来了，画布是不是在这边啊，你把这个画布调到中间就是不可样。为零是不是OK，然后呢，也为零，不，不也为零，OK。是没了，哎，好像还有一点。那个方向。

肯定有为0PX，我们看一下什么东西造成的，这边怎么还缺一点哎。他自己画步的问题吧，是吧，OK，那把我把这个画布放到什么中间来吗？怎么把它怎么把它放到中间来，你走一个一百一百码。看是不是过来了，你看是不是走的，我的画布在这边不行，我按这个画步应该怎么居中是吧，但画布居中了怎么办？OC嘛是吧，找到这个什么OC吗？怎么办。行吗？POI为是吧，Left为零，Top为零，RIGHT0，看一下。

是就过来了，OK，然后然后然后让他去放的，怎么放。Sit interval，干嘛来一个方形？每次我都把你的一帧帧的东西给你头上来，可不可以啊，看一下手印。其实不用给时间。默认在这个东西结束之后的话，那。啊，为什么？其实不用给时间，你这个视频自己没有放，是不是直接给个什么how to，走，你看一下，那是不是在画布上面去放电影了，是吧，这个时候这我们是一个什么做法，那我们等到停，这时候我们是个什么做法，我们将video做成一个真正的。相当于什么放映机，是不是这是放映机，这个是真正的。

银幕。能不能理解我们把视频的每一帧这干嘛放到这个画幅上面去吗？然后你在这个画画上面去做些动画，不需要操作这个微力标签了啊，这是很多现在比较大的门户，他们都会怎么做，对不讲，那你可以在这边，我们把这个播放器放在这个卡发上面，行不行也可以。能理解吗？好。