From mobile devices and smart TVs to browser-based environments, New Relic provides agents and SDKs to analyze performance, detect anomalies, and track custom data to pinpoint issues. Because many of our customers are in the media and entertainment space, we listened to their feedback and found that there was a collective need to analyze the performance of their video players and ad placements in real-time.
Traditional solutions in this space can be cumbersome and expensive, so we developed open-source trackers for most major video players and for Google publisher tags that work in combination with our existing browser and mobile agents. Using the Video agent for Video.js player quickstart, you can collect and calculate essential metrics such as: Player Load Time, Exits Before Video Start, Rebuffering Ratio, Bitrate, and more.
Add the New Relic Video Tracking Solution
If your company delivers video content, adding a New Relic tracker is often just one additional line of code. At our Github page, you can find setup instructions for supported players such as HTML5, Video.js, AVPlayer, ExoPlayer, Roku, and more. We also provide dashboards for instant visibility and quick setup of alerts, and a Media Analytics UI for tracking all KPIs of your customer experience and media ingestion pipeline. Now we'll walk through an example of instrumenting a Video.js video player, so you can see how simple it is.
Add the tracker
For this tutorial, we’ll use a guided installation via New Relic Instant Observability. This guided installation will automatically deploy dashboards and alerts into your account. To install, go to the Video agent for Video.js player quickstart, select Install quickstart and select an account to proceed.
Next, you’ll be prompted to install New Relic’s Browser Agent. Select See Installation Docs if you’d like to see the various ways to do that.
Then type browser into the search bar, select New Relic Browser, and choose the account where you want your data to reside.
Video Demo and then copy the resulting snippet.
Now that you have that snippet on your clipboard, open up the Github repo we cloned earlier.
Within the project directory, navigate to the samples directory. Within it, create a new file named
<script> tags on the first and last lines of the file. (If you’ve lost your snippet, follow these instructions to get it back).
Note in the
webm.html sample file, there are a few lines already included to instrument the video player: one
Congratulations—you’ve instrumented the sample app with New Relic! Return to your I/O tab with the install progress and select Done for the Browser agent, and again for the Video.js tracker.
The quickstart will now insert the alerts and dashboards into your account. If you closed the tab, you can access it from here. Just make sure to select the same account you put your Browser application into. Selecting See your data will take you to the dashboard, which for now will have no data. Let’s go generate some.
npx http-server from within the project directory and accept any install prompts if necessary.
Next, from within the repo, run
http-server and open up
localhost:8080 in your browser (if you have something running on 8080, you can use
-p when invoking
http-server to choose another port).
Navigate to the samples directory and select the
webm.html to view the sample. Select the play button on the video player and let the video play for a minute or so. In your dashboard, you should now have data showing metrics from your user experience. (If no data appears, try following the troubleshooting steps for Browser and the Video.js tracker).
The quickstart has also put some alerts into your account (disabled by default). You can view the policy by navigating to your Alert Policy Page, if you’d like.
This tutorial walked through how the instrumentation process for Browser Monitoring and one of our video agents works. Now you have the tools to do this for your production application.
Interested in installing a video agent for something other than Video.js? Check out our library of resources for instant observability for multiple video platforms.
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.