@mux/ai

Hi, I'm Steve Hepernan co-founder and head of product here at Mux and I'm going

to walk you through your first Mux

integration. So let me set the stage first. What we're looking at here is a

very basic HTML page

We have our HTML tag title of my Mux integration and then a simple video tag

that has

controls turned on with an height and then also a source. If I go over to

Chrome and

load up this page in Chrome

You can see that the video plays back

It's Big Buck Bunny. Everybody's favorite or least favorite. So it's a very

simple example. This is what we're going to use to

show off our first integration

From here, let's go over to the Mux dashboard. On the Mux dashboard

we get our property list and from here we'll choose a property to integrate

with and

for this I'm going to choose our integration demo development property. So when

I click that

It brings up the SDK selection window. Now if you're using a specific video

player

you'll want to scan through this list to find that player and

use those docs to get set up. But for this example, all we need is the very

simple HTML video SDK.

So I'm going to click on that

So the first thing we're going to do is grab this line of JavaScript here. And

what this will do is

pull in the Mux JavaScript

into our HTML page. Now it's best practices to put at the end of the page

before the end of the body.

So I'm going to do that. I'm going to paste it right there.

Save the document and then go back to our docs.

This next note here is about installing with NPM. We're not building a

JavaScript application here using node.

So we can just blow right past that point.

To this example down here and what you'll see is something that should look

kind of familiar. In our example here

we have a very basic HTML video tag.

One difference is that our tag does not have this ID attribute yet.

So I'm going to go and copy the ID attribute from here and add it to

our video tag over here. And you'll see why that's important in a second.

I'll save that and go back to the docs.

And the next step would be copying this big block of JavaScript here.

What's happening in this JavaScript is we're essentially telling the Mux

JavaScript by using this Mux.monitor

function to start tracking our specific video tag here. So you can see that it

says my video

in this first argument of the Mux.Monitor function.

So that points to the ID of the video tag and it has the pound or hash symbol

before that,

which is basically CSS for pointing to that ID.

Under the scenes here we're using the document.querySelector API and so any CSS

value will work here

but you want to make sure that it's pointing to just the tag that you're

interested in tracking.

So I'll go ahead and copy this whole script tag.

And paste that into our example document here.

And it needs to come after the script that we pasted in the page before.

So that the Mux SDK is already in the page and then we can work with it after

that.

Now the next thing you want to make sure is that this property key is the

actual property API key

for the property you're trying to track. Now by nature of the way that we

clicked from a property

to the SDK selection into the docs Mux has already embedded this API key into

the docs for us.

But if you came to the docs directly you might see something here that is

example property key

and you want to replace that with the API key for the property you care about.

So I'll jump back to the Mux docs here, the Mux dashboard here really quick.

You can see the property that we're looking at is this integration demo

development

and the API key is right below that. And so we can just copy and paste that

into the same block. Now it's the same one for here but you'd be replacing the

example property key

otherwise. From here we can then start filling in additional details about the

video that playing

or the player specifically probably want to add a video title. That's a good

one to add.

So this is Big Buck Bunny so add that in. I mean you can work through these

different

metadata details. If you go to the docs and check out the options and metadata

section

you'll see all the different options that you have for providing additional

information to send

a Mux about the video that's playing or the page or the player which will give

Mux a little bit

more opportunity to provide interesting details in the dashboard and start to

correlate some of

these things together. Okay so once we have that all set up we can save this

document and then go

over to our example page and reload the page. The next thing I'm going to do is

actually open the

Chrome dev tools. So I'll go to more tools here and then dev tools. What that's

going to allow

us to do is just verify that the integration is working and beacons are being

sent to the Mux

backend. So when I'm on the network tab here I can then click play on the video

and the video

starts playing and you can start to see some details come through in the

network tab and what's

happening here is Mux is keeping track of the different events that are

happening as the video

plays and sending those to the Mux dashboard in order to track them and start

creating interesting

stats and details about the video that's playing. Great so just by the fact

that these beacons

are being sent we know that our integration is working. The next thing that you

can do in order

just kind of make this first integration process a little more interesting is

start by just reloading

this page and what that does is signal to Mux that the previous session of

watching the video is

now done. The page is reloaded and Mux can now take that whole video viewing

session and wrap it up

and start showing it in the dashboard. So by reloading we allow Mux to do that.

We can do that a few

more times skipping around in the video to create some interesting video view

details. You can even

play around Chrome has some nifty tools for throttling the video if you want to

try and cause

some rebuffering and see what that looks like in the dashboard but just reload

ing a few times will

give you a few different video views to look at and kind of see some start to

see some some graphs

show up. You'll you'll start to see data in the dashboard in about a minute or

two. It takes about

a minute for for Mux to determine that the video is finished roll up the

details and start showing

in the dashboard. But once you do that you can go back to the Mux dashboard and

you should see that

your property no longer has the add first integration flag at the top which

means that there's now

data in your account and you can click into the property and start seeing your

data. So great we've

finished with the first integration. If you have any problems or questions in

this process please

feel free to reach out. But otherwise thanks for watching!