Welcome to the Bitmovin Player Developer Learning Lab

For any questions or support during this learning lab please reach out here on the chat or join our break out room.

For further questions you can reach out to us on #bitmovin in #video-dev Slack channel here: https://video-dev.slack.com/archives/C01091V7KMK

Logistics

Today we will be walking through various examples that will build on eachother. Each example will be already set up using JSFiddle with small parts that you will be filling in. We will walk through these examples together.

• Bitmovin Player v8 API documentation - Keep this URL open to look through the Bitmovin Player API documentation
• Bitmovin Dashboard - Sign up for an account to get a Player and Analytics license
• Bitmovin CSS Class Reference - CSS class reference to use when styling your player

• JSFiddle - Sign up for an account if you want to fork and save these examples. This is not a requirement. You can participate as a guest.

Examples

1. Basic VOD Video Playback - This example will show us how to get basic HLS, DASH, Smooth, and progressive mp4 video playback working with the Bitmovin Player. You will be loading the default Bitmovin UI that allows you to control the video player - final

2. Basic Bitmovin Analytics - Track the QoE / QoS of you user's video playback session. This example enables the Bitmovin Analytics module and collects over 50 different metrics during the session. We will view this data later in the Bitmovin Analytics Dashboard - final

3. Autoplay / Mute - Enable autoplay of your video player and mute the content. If the browser allows it, video playback will start automatically. Some browsers block autoplay with sound, therefore muting increases the likelihood of autoplay to work - final

4. Buffer Levels - Set the target buffer levels for audio and video. Track and dispay the current buffer level on each timechanged event. See what impact does your buffer have on a live stream? - final

5. Bitrate min, max, and switches Adjust the adaptive bitrate logic of your video player. Set a min, max, and startup bitrate for the player. Track the current downloading bitrate and the current playing bitrate and see how they are related. Graph this information on a chart using ChartJS - final

6. DRM protected content Create a load and unload button that will allow you to easily switch between sources and playback your own stream. The additional stream will be protected by Widevine and Playready Digital Rights Management (DRM) systems on Chromium and Firefox based browsers and leveraging AES-128 encryption without DRM on Safari - final

7. A/B testing using Bitmovin Analytics Set up an A/B test using Bitmovin Analytics. Decide on a percentage of users to give a smaller bufferTarget and let analytics know which experiment (buffer target) they received. Show this on the back end - final

8. Styling the UI via CSS Style your player via css. Change the bitmovin watermark to something of your choice. final

9. Client Side Ad Scheduling - pre, mid, post roll Schedule a preroll to play before you content load. Change it to a midroll. See how the UI changes final

Tech Links

• Bootstrap 4 -
• ChartJS - JS library used to draw the bitrate graphs