Media Cloud includes a variety of ways to playback the video on your site. You can choose to use the native HTML5 <video> element (with or without HLS.js), the full featured Video JS player or you can bring your own.
The three options available are:
Native player with HLS.js
This will use the native HTML5 <video> element but includes HLS.js which enables HLS playback support on Chrome, Firefox and other platforms that don’t natively support HLS.
Video JS is a full featured open source video player that is extensible with plugins. Media Cloud includes the most common plugins already, but additional hooks are available for you to include your own. This is the recommended player if you are not using another third party player.
Video JS Settings
The Video JS player has a number of settings that control how it functions.
Allows the video to be played on Air Play devices. Only works on Safari browsers (hidden on non-Safari browsers).
Allows the user to select the video quality, or set it to auto so that quality changes based on network conditions.
Enabling this feature will generate a film strip so that a thumbnail is shown as a user hovers over the playback bar of the video player.
This setting will override the browser’s native handling of HLS. For example, on Safari desktop, when using native HLS handling, the quality selector is unavailable. By turning this on, the quality selector will be usable on Safari. The only tradeoff is that automatic quality switching based on network conditions is slightly faster/smoother when using the native HLS handler, but it’s not really perceptible. We recommend turning this on.
Google Analytics Mode
To track video events in Google Analytics, select which mode your are using. The events that are tracked are:
- Full-screen Change
- Volume Change
- Time Update
- Resolution Change
Use MP4 Fallback / MP4 Fallback Quality
When this is enabled, Mux will also generate three MP4 renditions of your video. When generating the <video> tag, Media Cloud will include the selected quality after the HLS streaming source. This insures that video will playback regardless of browser and environment.
Additional Player CSS Classes
Add any additional CSS classes for the <video> tag. This is useful if you are using a third party player.