@mux/ai

Hey everyone, I'm Dylan with Mux and today we are going to

get started with Mux Player.

Mux Player is a drop in web component for doing video

playback with Mux assets in your web application.

Let's jump into it.

So first, I'm going to start here in the Mux dashboard.

You Um, may already have assets in your Mux dashboard,

and normally you'd probably be creating assets with API

calls, but just to speed things up, I'm going to

create one here directly in the dashboard and I'll just

use the default, um, Mux intro video to create that.

So this is the asset I just created.

Um, now, uh, let's drop in, drop in Mux player into a

web application that I have.

So I'm going to need this playback ID.

So let me just copy that real quick to my clipboard.

And I go here.

I have this.

This is a kind of default code sandbox, just

plain HTML application.

So first thing I need to do here is install Mux

player as a dependency.

And that's an app Mux slash Mux player on NPM.

I'm going to go over to this index.

I don't need this code.

And then let me just.

import here, um, at Mux, Mux player.

Okay.

So now I've imported the package into my HTML,

and I'm going to change this to just be an H1.

Hello, Mux player.

Save that.

Okay.

Um, all set up.

Now let's jump over to the Mux player docs here.

And in this quick start, see, I've already installed it.

Uh, this is the HTML code to get started.

So I'm just going to jump over here and Let's just

paste that, um, that code, but I want to use, I'm going

to use this playback ID from the Mux dashboard and

just drop that in there.

Okay.

Save that.

Um, see, that's the asset I just created.

And right now, um, that's it.

That's everything I have to get to get started.

Everything's working out of the box.

And really all I needed was that one playback

ID, one line of code.

And right now I have this fully functional video player.

You can see on small screens, the controls are overlaid

on top of the player.

As I go to a larger screen, Those controls,

um, rearrange and shift down to the control bar.

The defaults are all, all here baked in for you.

Playback rate, you can speed up the video.

Jump forward and jump back by 10 seconds.

And this would work with a live playback ID.

If it's a live stream, then you'll get a UI that's live.

Um, you set to specify with the stream type that it's

live and also Chromecast is enabled by default.

So if I have a Chromecast connected, I'll see the

Chromecast control Airplay is enabled by default.

Let's actually jump over to Safari to see.

Airplay.

So load this, this web app in Safari.

And you can see I have the Airplay control here.

Um, so everything, you just kind of get all of that out of

the box, this nice responsive player experience, but

just that one line of code.

And again, this is a web component.

So it works with any JavaScript framework

that you're using to build your application.

Um, we do also have a Mux player react package,

which gives you a react component, which has

the same functionality.

And also notice here that, um, some other nice features

is you get the timeline hover previews for your video.

So as I hover over this video, I can see the little

thumbnails popping over the timeline, makes it

really easy for scrubbing.

And, um, notice this metadata.

So this metadata video title and viewer ID that

is actually directly integrated with Mux data.

So, um, Mux data will monitor the video playback experience,

quality of experience metrics.

So you can make sure that your users are having a good

time viewing your video.

And that's all wired up by default, passing

some metadata, makes that data more useful.

And that's it.

One line of code, you get all the features of Mux video

and Mux data integrated.

In the next video, we'll talk about customizing Mux player.