In class video we installed F.L. VGX into our re-act project.
I'm now going to start my reac project back up with NPM start.
And then once my server starts back up you know open up my code editor again and find the stream show
component.
So inside if you're going to want to make use of that F.L. V.
JS library the code that we're going to want to write inside of your is going to be essentially what
you see in these two examples.
So the one example here at Noad media server or the same exact example over here at the actual effluvia
JSA documentation.
So we essentially need to import the F.L. of the library into our file.
We then need to create a video element and return it from our reaction opponent.
We need to get a reference to that video element and then we're going to create a player and pass a
reference to the video element off to that player.
So let's give it a shot.
Back inside of my code editor I'm going to import Falvey from effluvia.
J.S. up you're at the top.
Then down of my render method above my H-1 I'm going to create a new video element.
Now we need to get a reference to the video element that actually gets created on the screen.
Remember we've gone to that process a little bit ago and we spoke about creating refs using react.
Remember the ref system in react is how we can get access or a reference to a actual Dom element that
gets created inside of our DOM tree all the GSX that you and I are working with right here are not actual
Steimle elements.
They are GSX elements that eventually come to represent a DML element.
So in order to get a reference to this video element right here we're going to define our constructor
method up at the top constructor.
And as usual we will call super with props.
And then after that we will set up a video reference.
So I going to call this video ref.
I'm going to assign it to this and it's going to get a value of re-act not create ref like.
Senao down inside of our render method.
We're going to pass this ref off to that video that we just created.
So here's video right here.
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
this and just make sure we can see a video element on the screen.
So I get to flip back over to my application and I see absolutely nothing here.
Even after I refresh the page up.
Well maybe that's a little bit better.
So I see kind of like this blank area right here.
But I don't actually see any like distinct video player or anything like that.
So by default this video is kind of showing up as being totally empty.
And you also notice that the video is kind of constrained in with right there.
So let's add a couple of additional props to that video element to get it to work a little bit better
than it is right now to do so.
We're going to find the video element again.
I'm going to give it a style prop and I'm going to assign it a whiff of 100 percent.
Now a quick reminder here we have the two sets of curly braces because the outer set means that we're
going to pass in or define a javascript expression the inner set is defining an actual object.
We're then going to give it a width of 100 percent.
And remember you need to put that 100 percent inside of quotes.
I'm going to add on one other prop to this thing as well.
I'll say controls equals.
True like so.
Now remember any time that we pass a prop down to a child component and it's getting a value of simply
true we don't actually have to write out true.
We can simply write out the name of the prop and that's going to show up as controls equals true inside
of that child.
All right.
Let's now try saving this and then flipping back over.
And now when we do so we can see a much more standard video player.
OK so this looks pretty good.
Let's take another quick pause right here.
When we come back the next section we're going to use the F.L. V library and hook that thing up to the
video player that we just created.
So quick pause and I'll see you in just a minute.