@mux/ai

Okay, now that we have Mux Player set up, let's

start customizing the look and feel of the player.

First things first, uh, we might want to

customize the poster image.

The default poster image will be the midpoint of the

video, which is the default.

Thumbnail and that's returned from the mux thumbnail API.

Um, if we want to change that a little bit, we can pass in

this thumbnail time attribute.

So let's say I want the thumbnail time from the five

second mark and do that.

And that'll be the thumbnail from five seconds or

let's say I want the 22 seconds thumbnail time.

Okay.

and do that.

Now it'll be the thumbnail from 22 seconds.

So that's handy when you want a thumb, the poster to be from

a frame from the video itself.

Um, if you have a completely unrelated, um, image that you

want to use for the thumbnail, you can do that as well

with the poster attributes.

You can say poster equals, and you can pass in a URL,

um, pointing to an image and use that as your poster.

Um, so that's the way to con That's a way to

customize the thumbnail.

Next is let's say you have a brand color that you want

to use and you just want to kind of theme the player

according to your brand.

We call that the primary color attributes.

You can pass in that.

Um, I have this orange color here I can use, and now

that'll theme all the controls in that primary color and

you can see how that works.

Um, what else can we do here?

Oh, we can add a video title.

So, um, pass in here title equals.

my mux video, um, passing a title that'll show

up in the top left.

Um, so that's handy.

And then the thing about mux player is because it

is just a plain HTML web component, um, we can

style this thing with CSS.

Um, just kind of like you, you would style any HTML element.

So let's give this some style here and let's give

this, um, uh, mux player.

So let's select it and then say with.

100 percent max with, uh, 500 pixels.

Let's give it a display block by default.

It's inline blocks.

Let's give it a display block and then, um, margin

40 pixels at the top and auto on the sides.

So that way it'll be kind of nice and centered.

My page refresh this.

Okay, so now you can see it's centered here directly

in the middle of the page.

And see, I'm just using normal CSS to style this.

Now, let's say for my particular video, I don't care

for some of these controls.

Let's say I don't want users to have the control

to adjust the playback rate, for example.

What I can do here is We have some CSS variables

for, um, showing for, you know, controlling the

display value of these.

Um, first of all, dash dash controls none, that'll just

hide all of the controls.

So I do that.

And now you can see there's no controls here.

Um, well, that's not exactly what I want.

So let's say, um, so let's undo that.

Okay.

Um, these are the controls available.

So there's the pip button, which one, Do we want, okay,

let's say the seek that, uh, the, uh, the rate playback

rate, where is playback rate, playback rate button.

None.

So copy that one.

Let's do that.

And let's say I also want to disable the seek

for seek backward and seek forward buttons.

Cause maybe I just have a short video here and

you know, you, my users don't really need to seek.

I can just hide that.

You can see the playback rate.

Control is gone, the forward, backward controls

are gone, um, but I still have everything else.

So it's easy to just kind of customize the field with CSS.

Now if you really want to get into it, um, you can, you can

hide, you can see that these controls, how they kind of,

they jump around depending on the size of the container.

Oh, I have a max 500 pixels.

Let me increase that.

Let me make this 1000 pixels.

Okay.

So you can see that, uh, you know, sometimes the

controls are at the top or at the, at the bottom, um,

depending on the screen size.

So you can really get granular to control.

If you only want to hide this control when it's on the

bottom, but you're okay with it being on the top, then

you can, you can control that with these CSS variables.

Mux Player also exposes CSS parts.

So that we have some documentation here so you

can really kind of control the CSS of the specific

parts that are exported and that's kind of a native web

component kind of pattern that we use to expose pieces

of the player for styling.

The control's backdrop color so you can control that.

That one you have to be a little bit of, you know,

Careful with because there is a contrast ratio

requirement for accessibility, so be careful changing

changing that around.

You don't want to make it.

Um, if you get rid of it completely, then the controls

won't be visible from an accessibility standpoint.

So primary color and secondary color.

We talked about that.

Um, and now when you want to kind of change the

default behavior, much player pretty much supports

the attributes that the video element supports.

So muted, for example, I can pass muted here for the

player to start off muted.

Um, you can see it's muted.

Um, oftentimes people want to autoplay videos.

So the autoplay attribute, as you can see, it's muted

and it's autoplaying.

Um, autoplay can be a little tricky.

So, um, we actually kind of extended the autoplay

attribute for the purposes of Mux player, so where you

can pass in autoplay equals muted to just always autoplay

the video in a muted state.

Um, that's often what you need to do because browsers

will not allow you to autoplay with sound in most cases.

Um, we also have the autoplay any value.

Um, and that means that it'll try to autoplay with sound.

If that fails, then it will fall back to autoplay muted.

We have that behavior.

Okay.

here.

If you want to loop the video, for example, like let's

say you have a video that's playing in the background

of your webpage and it's looping, then you can do

loop, uh, autoplay muted.

So now it'll autoplay muted and it'll loop.

And then let's say if it's just playing in

the background, maybe you don't want controls.

So now you can say controls none.

So now that should give me a player that has no controls.

And it's just going to auto play muted in the background.

Uh, sometimes you may want that if you're, you know,

have like a hero video that takes up the entire top

section of your video page.

So that's all the different ways.

Um, at least some of the ways that you can

customize let's play.

Let's make sure this loops.

At the end,

you can see it.

Yeah, start looping.

We have keyboard shortcuts enabled by default.

That works when the player or any of the

controls has focused.

You can turn that off with no hot keys.

Then the other thing when it comes to kind of customizing

Mux Player is that you get the JavaScript events

and then regular HTML5 video element fires off.

So, um, let's, let me get rid of this.

Let me get rid of this.

Let's kind of go back to the default.

And I can write some JavaScript here where,

um, mux player equals document dot query selector.

Mux Player, Mux Player.

addEventListener, and, uh, let's just

go html5 video events.

Okay, so here are the events that fire for html5 video.

Play, playing, let's, let's look at the progress event.

So I can add the progress event, um, and let's just

log that to see what we get.

Okay,

let's make that muted again, so I don't have to hear that.

Um,

so you can see that progress event is firing, um, in that

callback that I registered.

So now I might want to use that progress event,

um, to track a user's progress through the

video and maybe save their progress into my database

or something like that.

So all of these events that you get on the HTML5 video

element, these are all, you know, Baked into Mux Player,

you'll see the same ones, same ones firing, so you can just

add event, event listeners.

Alright, that is some of the basics of

customizing Mux Player.