Monitor Flowplayer | Mux
Monitor Flowplayer
Connect Mux Data to Flowplayer to collect playback performance metrics. Use this guide when your web application plays video with Flowplayer.
In this guide:
Features
The following data can be collected by the Mux Data SDK when you use the Flowplayer SDK, as described below.
Supported Features:
- Engagement metrics
- Quality of Experience Metrics
- Web metrics such as Player Startup Time, Page Load Time, etc
- Custom Dimensions
- Customizable Error Tracking
- Ads metrics
- Custom Beacon Domain
1 Install @mux/mux-data-flowplayer
Include the Mux JavaScript SDK on every page of your web app that includes video.
npmyarncdn
2 Initialize Mux Data
Get your ENV_KEY from the Mux environments dashboard.
ENV_KEY is a client-side key used for Mux Data monitoring. These are not to be confused with API tokens which are created in the admin settings dashboard and meant to access the Mux API from a trusted server.
Call flowplayer like you normally would and save a reference to the player. Call initFlowplayerMux with the player reference.
Passing in flowplayer global
You'll see the 3rd argument to initFlowplayerMux is flowplayer. This is the global flowplayer object. If you are using a bundler and importing flowplayer with require or import then you'll need to pass in the flowplayer object.
If no flowplayer object is passed in, then initFlowplayerMux will look for flowplayer on then global window object.
3 Make your data actionable
The only required field in the options that you pass into @mux/mux-data-flowplayer is env_key. But without some metadata the metrics in your dashboard will lack the necessary information to take meaningful actions. Metadata allows you to search and filter on important fields in order to diagnose issues and optimize the playback experience for your end users.
Pass in metadata under the data on initialization.
4 Set or update metadata after initialization
There are some cases where you may not have the full set of metadata until after the video playback has started. In this case, you should omit the values when you first call initFlowplayerMux. Then, once you have the metadata, you can update the metadata with the updateData method.
5 Changing the video
There are two cases where the underlying tracking of the video view need to be reset:
- New source: When you load a new source URL into an existing player.
- New program: When the program within a singular stream changes (such as a program change within a continuous live stream).
Note: You do not need to change the video info when changing to a different source of the same video content (e.g. different resolution or video format).
New source
If your application plays multiple videos back-to-back in the same video player, you need to signal when a new video starts to the Mux SDK. In order to signal the Mux SDK that a new view is starting, you will need to emit a videochange event, along with metadata about the new video.
New program
In some cases, you may have the program change within a stream, and you may want to track each program as a view on its own. In this case, you emit a programchange event, including the updated metadata for the new program within the continuous stream. This will remove all previous video data and reset all metrics for the video view, creating a new video view.
6 Advanced options
Disable cookies
By default, Mux plugins for HTML5-based players use a cookie to track playback across subsequent page views in order to understand viewing sessions. This cookie includes information about the tracking of the viewer, such as an anonymized viewer ID that Mux generates for each user. None of this information is personally-identifiable, but you can disable the use of this cookie if desired. This is done by setting disableCookies: true in the options.
Over-ride 'do not track' behavior
By default, Mux plugins for HTML5-based players do not respect Do Not Track when set within browsers. This can be enabled in the options passed to Mux, via a setting named respectDoNotTrack. The default for this is false. If you would like to change this behavior, pass respectDoNotTrack: true.
Customize error tracking behavior
Errors are fatal. Errors tracked by mux are considered fatal meaning that they are the result of playback failures. By default, @mux/mux-data-flowplayer will track errors emitted from the video element as fatal errors. If a fatal error happens outside of the context of the player, you can emit a custom error to the mux monitor.
Disable automatic error tracking
In the case that you want full control over what errors are counted as fatal or not, you may want to consider turning off Mux's automatic error tracking completely. This can be done by passing automaticErrorTracking: false in the configuration object.
Ads tracking with @mux/mux-data-flowplayer
Mux has been tested with and support Flowplayer's IMA and VAST plugins for ad support. No addition configuration is needed, Mux will track ads automatically.
Customize beacon collection domain
If you have integrated a custom domain for Data collection, specify your custom domain by setting beaconCollectionDomain.
Release notes
Current release
v3.14.29
- Update mux-embed to 5.18.2
Previous releases
v3.14.28
- Set viewer_connection_type, viewer_connection_low_data_mode with new networkchange event
- Updated dependency:
mux-embedto v5.18.0
v3.14.27
- chore force upgrade of yarn to 4.12.0
- Updated dependency:
mux-embedto v5.17.10
v3.14.26
- chore upgrade yarn version
- Updated dependency:
mux-embedto v5.17.9
v3.14.25
- chore publish mux-embed first, then the rest
- Updated dependency:
mux-embedto v5.17.8
v3.14.24
- fix workspace build issue
- Updated dependency:
mux-embedto v5.17.7
v3.14.23
- chore fix release pipeline
- Updated dependency:
mux-embedto v5.17.6
v3.14.22
- fix issue where playback_mode may not have appeared on all events
- Updated dependency:
mux-embedto v5.17.5