Integrate Mux Player to play videos
-
–
We'll now move on to playing videos in the browser. -
–
For optimal playback, Mux has created their own JavaScript-based video -
–
player called Mux Player, -
–
which works just like a HTML5 video tag. If we go to the Mux docs for Mux -
–
Player, -
–
we'll see that we can install it in an NPM package. -
–
Run "npm install" and save it as a devDependency. -
–
We can then import it into our app.js file. -
–
We now need to create a page to display the video details. -
–
Open up our front-end VideoController -
–
and return a new view videos.show, passing the video injected by route-model -
–
binding as a parameter. -
–
Create that view. -
–
Open the index. -
–
Set the title to the video name. -
–
And we're going to grab the card and replace the grids. -
–
Go back to our index view. -
–
And we can now set the href of our link tag -
–
to the video's "show" route for this particular video. -
–
If we now click on a video in the index listing, we're now taking to a page for -
–
that video, -
–
but the video doesn't play. -
–
All we're seeing is a video thumbnail. -
–
If we go back to the Mux docs, we can find this mux-player tag. -
–
We can copy it and replace our img tag. -
–
We can update the playback-id attribute value -
–
to our Video model's "mux_playback_id" attribute. -
–
And we can also change some of these metadata attributes. -
–
If we go to a video details page, we now see that we've got a video player, -
–
but the video won't play. -
–
This is because we're using signed playback IDs. -
–
So we need to provide a token for the playback. -
–
If we go back to the "Secure video playback" section of the Mux docs, -
–
to "Sign the JSON Web Token", and again to the PHP example, -
–
we'll see that another value for the audience is "v" for "video". -
–
So we can create a new method in our JwtFactory class for generating JWTs -
–
for playing videos. -
–
Open the JwtFactory class, -
–
copy the "thumbnail" method, and rename it "playback". -
–
Update "t" for "video", -
–
and set the expiry to the video's duration plus 30 minutes for latency. -
–
It's important to call getTimestamp to set the expiry as any Unix timestamp -
–
integer, -
–
rather than a Carbon instance, otherwise the JSON web token won't be invalid. -
–
If we go back to the Mux Player docs and under "Advanced usage", -
–
we'll see there's a section for "Using with signed URLs". -
–
Where we want to use Mux Player with signed URLs, -
–
we need to specify additional attributes, including playback-token. -
–
So let's do that. -
–
For the playback-token, we'll use our JwtFactory. -
–
So we can use our JWT facade, the "playback" method we've just defined, -
–
and we can pass the video instance. -
–
We can also do the same for thumbnail-token, -
–
specify thumbnail-token attribute, and use the "thumbnail" method on that facade. -
–
If we refresh in the browser, we should see that the player's background is set -
–
to the video's -
–
thumbnail, and that we can now play the video. -
–
If we come back to the video after some time, and try and view the video, -
–
playback will fail because the token's expired. -
–
This will prevent people from sharing URLs and being able to watch videos far -
–
in the future. -
–
Well next up, we'll have playback restrictions, so that videos can only be -
–
played on your own -
–
domain and not on any other website, even if the expiry value is still in the -
–
future.