1 00:00:00,790 --> 00:00:04,950 In class video we installed F.L. VGX into our re-act project. 2 00:00:05,040 --> 00:00:09,300 I'm now going to start my reac project back up with NPM start. 3 00:00:09,500 --> 00:00:15,080 And then once my server starts back up you know open up my code editor again and find the stream show 4 00:00:15,080 --> 00:00:16,150 component. 5 00:00:16,160 --> 00:00:19,080 So inside if you're going to want to make use of that F.L. V. 6 00:00:19,100 --> 00:00:24,080 JS library the code that we're going to want to write inside of your is going to be essentially what 7 00:00:24,080 --> 00:00:25,680 you see in these two examples. 8 00:00:25,820 --> 00:00:31,150 So the one example here at Noad media server or the same exact example over here at the actual effluvia 9 00:00:31,150 --> 00:00:32,880 JSA documentation. 10 00:00:32,960 --> 00:00:36,990 So we essentially need to import the F.L. of the library into our file. 11 00:00:37,040 --> 00:00:41,070 We then need to create a video element and return it from our reaction opponent. 12 00:00:41,240 --> 00:00:48,080 We need to get a reference to that video element and then we're going to create a player and pass a 13 00:00:48,080 --> 00:00:50,900 reference to the video element off to that player. 14 00:00:50,900 --> 00:00:52,500 So let's give it a shot. 15 00:00:52,880 --> 00:00:58,150 Back inside of my code editor I'm going to import Falvey from effluvia. 16 00:00:58,210 --> 00:00:59,890 J.S. up you're at the top. 17 00:01:01,300 --> 00:01:09,350 Then down of my render method above my H-1 I'm going to create a new video element. 18 00:01:09,370 --> 00:01:14,110 Now we need to get a reference to the video element that actually gets created on the screen. 19 00:01:14,110 --> 00:01:19,760 Remember we've gone to that process a little bit ago and we spoke about creating refs using react. 20 00:01:19,780 --> 00:01:25,630 Remember the ref system in react is how we can get access or a reference to a actual Dom element that 21 00:01:25,630 --> 00:01:31,180 gets created inside of our DOM tree all the GSX that you and I are working with right here are not actual 22 00:01:31,290 --> 00:01:32,200 Steimle elements. 23 00:01:32,280 --> 00:01:38,070 They are GSX elements that eventually come to represent a DML element. 24 00:01:38,110 --> 00:01:43,000 So in order to get a reference to this video element right here we're going to define our constructor 25 00:01:43,000 --> 00:01:47,680 method up at the top constructor. 26 00:01:49,550 --> 00:01:52,310 And as usual we will call super with props. 27 00:01:52,460 --> 00:01:55,520 And then after that we will set up a video reference. 28 00:01:55,520 --> 00:01:57,560 So I going to call this video ref. 29 00:01:57,560 --> 00:02:06,000 I'm going to assign it to this and it's going to get a value of re-act not create ref like. 30 00:02:06,910 --> 00:02:09,050 Senao down inside of our render method. 31 00:02:09,070 --> 00:02:12,460 We're going to pass this ref off to that video that we just created. 32 00:02:13,060 --> 00:02:14,580 So here's video right here. 33 00:02:14,710 --> 00:02:22,730 I'm going to pass it a ref Propp and it's going to receive this DOT video ref like the OK let's save 34 00:02:22,740 --> 00:02:26,610 this and just make sure we can see a video element on the screen. 35 00:02:26,610 --> 00:02:31,080 So I get to flip back over to my application and I see absolutely nothing here. 36 00:02:31,080 --> 00:02:34,470 Even after I refresh the page up. 37 00:02:34,660 --> 00:02:36,080 Well maybe that's a little bit better. 38 00:02:36,160 --> 00:02:38,640 So I see kind of like this blank area right here. 39 00:02:38,650 --> 00:02:42,770 But I don't actually see any like distinct video player or anything like that. 40 00:02:42,790 --> 00:02:45,850 So by default this video is kind of showing up as being totally empty. 41 00:02:45,910 --> 00:02:49,440 And you also notice that the video is kind of constrained in with right there. 42 00:02:49,660 --> 00:02:53,770 So let's add a couple of additional props to that video element to get it to work a little bit better 43 00:02:53,770 --> 00:02:57,050 than it is right now to do so. 44 00:02:57,070 --> 00:02:59,030 We're going to find the video element again. 45 00:02:59,230 --> 00:03:05,660 I'm going to give it a style prop and I'm going to assign it a whiff of 100 percent. 46 00:03:05,710 --> 00:03:10,300 Now a quick reminder here we have the two sets of curly braces because the outer set means that we're 47 00:03:10,300 --> 00:03:16,750 going to pass in or define a javascript expression the inner set is defining an actual object. 48 00:03:16,790 --> 00:03:19,290 We're then going to give it a width of 100 percent. 49 00:03:19,300 --> 00:03:23,210 And remember you need to put that 100 percent inside of quotes. 50 00:03:23,380 --> 00:03:26,050 I'm going to add on one other prop to this thing as well. 51 00:03:26,080 --> 00:03:27,960 I'll say controls equals. 52 00:03:28,030 --> 00:03:29,440 True like so. 53 00:03:29,620 --> 00:03:35,050 Now remember any time that we pass a prop down to a child component and it's getting a value of simply 54 00:03:35,050 --> 00:03:37,210 true we don't actually have to write out true. 55 00:03:37,240 --> 00:03:42,550 We can simply write out the name of the prop and that's going to show up as controls equals true inside 56 00:03:42,550 --> 00:03:43,640 of that child. 57 00:03:44,080 --> 00:03:44,340 All right. 58 00:03:44,350 --> 00:03:47,410 Let's now try saving this and then flipping back over. 59 00:03:47,530 --> 00:03:51,270 And now when we do so we can see a much more standard video player. 60 00:03:51,280 --> 00:03:52,750 OK so this looks pretty good. 61 00:03:52,750 --> 00:03:54,540 Let's take another quick pause right here. 62 00:03:54,580 --> 00:03:59,590 When we come back the next section we're going to use the F.L. V library and hook that thing up to the 63 00:03:59,590 --> 00:04:01,340 video player that we just created. 64 00:04:01,360 --> 00:04:03,490 So quick pause and I'll see you in just a minute.