### HTML Page Skeleton for Bitmovin Player Setup
Source: https://developer.bitmovin.com/playback/docs/getting-started-web
This HTML skeleton provides the basic structure for integrating the Bitmovin Player. It includes placeholders for SDK installation, player container, player configuration, and source loading, serving as a starting point for the tutorial.
```html
Bitmovin SDK - Getting Started WEB SDK
```
--------------------------------
### Instantiate PlayerView and Load Source (Quick Setup)
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Demonstrates the quick setup for the Bitmovin Player by adding a PlayerView to the layout and loading a video source. This is suitable for basic playback scenarios.
```kotlin
val url = "https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd"
val sourceConfig = SourceConfig(url, SourceType.Dash) // or SourceConfig.fromUrl(url) to auto-detect the source type
val source = Source(sourceConfig)
val playerView = this.findViewById(R.id.playerView)
val player = playerView.player
player?.load(source)
```
--------------------------------
### Install Bitmovin Player via npm
Source: https://developer.bitmovin.com/playback/docs/player-web-x-getting-started
Installs the Bitmovin Player web extension package to your project using npm. This is the first step to using the player programmatically.
```shell
npm install @bitmovin/player-web-x
```
--------------------------------
### Setup Bitmovin Player with Configuration in Roku
Source: https://developer.bitmovin.com/playback/docs/getting-started-roku
This code snippet calls the `setup` method on the Bitmovin Player instance, passing the previously created player configuration object. This applies the desired settings to the player.
```brightscript
m.bitmovinPlayer.callFunc("setup", m.playerConfig)
```
--------------------------------
### Initialize Bitmovin Player with Configuration and Source (HTML/JavaScript)
Source: https://developer.bitmovin.com/playback/docs/getting-started-web
This snippet demonstrates the complete setup for the Bitmovin Player. It includes the HTML structure, SDK installation via CDN, player container definition, player configuration with license key and playback settings, and loading a video source with multiple streaming formats (DASH, HLS, etc.). Ensure you replace '' with your actual license key.
```html
Bitmovin SDK - Getting Started WEB SDK
```
--------------------------------
### Clone Bitmovin webOS Player Demo Repository
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-lg-webos
This command clones the sample webOS application repository from GitHub, which serves as a starting point for integrating the Bitmovin Player. It is a prerequisite for following the project setup steps.
```bash
git clone https://github.com/bitmovin/bitmovin-player-webos-demo.git
```
--------------------------------
### Instantiate Player with Analytics Configuration (Advanced Setup)
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Shows how to explicitly instantiate the Bitmovin Player with advanced configurations, including analytics. This allows for more control over player settings and data collection.
```kotlin
val playerConfig = PlayerConfig()
val analyticsConfig = AnalyticsConfig(licenseKey = "")
val player = Player(context, playerConfig, AnalyticsPlayerConfig.Enabled(analyticsConfig))
```
--------------------------------
### Install Bitmovin API SDK using npm
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-analytics-api
Installs the Bitmovin API SDK for JavaScript using npm. This is the first step to integrate Bitmovin's analytics capabilities into your application. No specific dependencies are required beyond npm itself.
```bash
npm install @bitmovin/api-sdk
```
--------------------------------
### Initialize Player Setup Callback in JavaScript
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-lg-webos
Sets up the Bitmovin Player and controller events using the `window.onload` callback in main.js. This ensures all static resources are available before execution, crucial for webOS TV applications which may require ES5 syntax.
```javascript
window.onload = function() {
setupControllerEvents();
setupPlayer();
// Set up DRM support ...
loadSource(source);
}
```
--------------------------------
### Load Source with Analytics Metadata (Advanced Setup)
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Demonstrates loading a video source into the player, including optional analytics metadata. This allows for richer analytics reporting by providing context like title and custom data.
```kotlin
val url = "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd"
val sourceConfig = SourceConfig(url, SourceType.Dash) // or SourceConfig.fromUrl(url) to auto-detect the source type
val sourceMetadata = SourceMetadata(title = "Art of Motion", customData1 = "sample data")
val source = Source(sourceConfig, AnalyticsSourceConfig.Enabled(sourceMetadata))
player.load(source)
```
--------------------------------
### Build Player with Analytics using PlayerFactory (Java)
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Provides a Java example for building the Bitmovin Player with analytics configuration using the PlayerFactory. This is an alternative to direct instantiation for Java developers.
```java
Player player = new PlayerBuilder(context)
.setPlayerConfig(playerConfig)
.configureAnalytics(analyticsConfig)
.build()
```
--------------------------------
### Create Player with Default Analytics Configuration (Swift)
Source: https://developer.bitmovin.com/playback/docs/getting-started-ios
Initializes a Bitmovin Player instance with analytics tracking enabled using default configurations. Requires an AnalyticsConfig with a license key. This is a streamlined approach for quick setup.
```swift
let analyticsConfig = AnalyticsConfig(licenseKey: "")
let player = PlayerFactory.createPlayer(
analytics: .enabled(analyticsConfig: analyticsConfig)
)
```
--------------------------------
### Tizen Application Initialization (JavaScript)
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-samsung-tizen
Sets up the application by calling essential setup functions once all static resources are loaded. Uses the `window.onload` event for reliable execution, common in older Tizen platforms requiring ES5 syntax.
```javascript
window.onload = function() {
setupPlayer();
setupControllerEvents();
}
```
--------------------------------
### Build Source with Analytics using SourceFactory (Java)
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Provides a Java example for creating a video source with analytics configuration using the SourceFactory. This is an alternative for Java developers to easily add analytics metadata to a source.
```java
Source source = new SourceBuilder(sourceConfig)
.configureAnalytics(sourceMetadata)
.build()
player.load(source);
```
--------------------------------
### Setup Analytics Collector for ExoPlayer
Source: https://developer.bitmovin.com/playback/docs/setup-analytics-android-v3
Initializes the Bitmovin Analytics Collector for ExoPlayer. Requires an Analytics License key and application context. Attaches the player, sets source metadata, and starts playback. Ensure to detach the player when done, typically before player release.
```kotlin
val analyticsConfig = AnalyticsConfig("")
// Create Analytics Collector for ExoPlayer
val analyticsCollector = IExoPlayerCollector.Factory.create(applicationContext, analyticsConfig)
// create and set SourceMetadata
val sourceMetadata = SourceMetadata(title="exampletitle", videoId="exampleId")
analyticsCollector.sourceMetadata = sourceMetadata
// Attach your ExoPlayer instance
analyticsCollector.attachPlayer(player)
// set mediaItem and start playing video after attaching
player.setMediaItem(mediaItem)
player.prepare()
player.play()
// Detach your player when you are done.
// For example, call this method before releasing the player
analyticsCollector.detachPlayer()
```
--------------------------------
### Install Bitmovin Player via CDN (HTML)
Source: https://developer.bitmovin.com/playback/docs/getting-started-web
This snippet shows how to include the Bitmovin Player Web SDK in your HTML page using a CDN link. This method is suitable for development and testing purposes. For production, consider using the modular NPM distribution for better performance.
```html
```
--------------------------------
### Embed Player using HLS Bundle (HTML)
Source: https://developer.bitmovin.com/playback/docs/player-web-x-getting-started
This example shows how to embed the Bitmovin Player Web X by including the HLS bundle via a script tag in an HTML file. It then instantiates the player with a given player key and a default container, and adds an HLS source for playback. This method is suitable for quickly setting up HLS streaming.
```html
Bitmovin Player Web X Demo
```
--------------------------------
### Setup Analytics Collector for Media3 ExoPlayer
Source: https://developer.bitmovin.com/playback/docs/setup-analytics-android-v3
Initializes the Bitmovin Analytics Collector for Media3 ExoPlayer. Requires an Analytics License key and application context. Attaches the player, sets source metadata, and starts playback. Ensure to detach the player when done, typically before player release.
```kotlin
val analyticsConfig = AnalyticsConfig("")
// Create Analytics Collector for Media3 ExoPlayer
val analyticsCollector = IMedia3ExoPlayerCollector.Factory.create(applicationContext, analyticsConfig)
// create and set SourceMetadata
val sourceMetadata = SourceMetadata(title = "exampletitle", videoId = "exampleId")
analyticsCollector.sourceMetadata = sourceMetadata
// Attach your Media3 ExoPlayer instance
analyticsCollector.attachPlayer(player)
// set mediaItem and start playing video after attaching
player.setMediaItem(mediaItem)
player.prepare()
player.play()
// Detach your player when you are done.
// For example, call this method before releasing the player
analyticsCollector.detachPlayer()
```
--------------------------------
### Load Source into Player (Swift)
Source: https://developer.bitmovin.com/playback/docs/getting-started-ios
Loads a prepared SourceConfig into the Bitmovin Player. It first creates a Source instance from the SourceConfig and then loads it. Alternatively, a SourceConfig can be loaded directly.
```swift
let source = SourceFactory.createSource(from: sourceConfig)
player.load(source: source)
```
```swift
player.load(sourceConfig: sourceConfig)
```
--------------------------------
### Create Bitmovin Player Instance in Roku
Source: https://developer.bitmovin.com/playback/docs/getting-started-roku
This code snippet shows how to create an instance of the Bitmovin Player once the SDK has been downloaded and is ready. It checks the `loadStatus` of the SDK component before instantiating the player.
```brightscript
if m.bitmovinPlayerSDK.loadStatus = "ready" then
m.bitmovinPlayer = CreateObject("roSGNode", "BitmovinPlayerSDK:BitmovinPlayer")
```
--------------------------------
### Setup OMSDK with Bitmovin Ad Module (HTML & JavaScript)
Source: https://developer.bitmovin.com/playback/docs/integrate-the-open-measurement-sdk
Integrates the Open Measurement SDK with the Bitmovin player using the Bitmovin ad module. This requires including the `advertising-bitmovin.js` and `advertising-omsdk.js` modules, adding them to the player, and configuring `partnerName`, `partnerVersion`, and `onAccessMode`. This example demonstrates a minimal setup in a single HTML page.
```html
```
--------------------------------
### Include Bitmovin Player Modules in index.html
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-samsung-tizen
Include essential Bitmovin Player modules via script tags in your `index.html` file. This setup is optimized for the constrained environment of smart TVs by loading only necessary components. Ensure to include the `bitmovinplayer-tizen.js` module for Tizen-specific functionalities.
```html
...
...
...
```
--------------------------------
### Clone Tizen Demo Application Repository
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-samsung-tizen
Clone the Bitmovin Player Tizen demo application from GitHub to your local machine. This repository provides a starting point for creating your Tizen TV application.
```bash
git clone https://github.com/bitmovin/bitmovin-player-tizen-demo.git
```
--------------------------------
### Comprehensive Bitmovin Player VR/360° Configuration Example
Source: https://developer.bitmovin.com/playback/docs/guides-playback-ui
A complete example of a Bitmovin Player configuration object tailored for VR/360° playback. It includes source details and various VR-specific settings such as contentType, startPosition, initialRotation, and initialRotateRate.
```javascript
var conf = {
key: 'YOUR KEY HERE',
source: {
title: "Bitmovin Player " + bitmovin.player.version,
description: "VR/360° Example, contentType: single, startPosition: 0, initialRotation: true, initialRotateRate: 0.07",
dash: '//bitmovin-a.akamaihd.net/content/vr-player/playhouse-vr/mpds/105560.mpd',
hls: '//bitmovin-a.akamaihd.net/content/vr-player/playhouse-vr/m3u8s/105560.m3u8',
progressive: '//bitmovin-a.akamaihd.net/content/vr-player/playhouse-vr/progressive.mp4',
poster: '//bitmovin-a.akamaihd.net/content/vr-player/playhouse-vr/poster.jpg',
vr: {
startPosition: 0,
contentType: 'single',
initialRotation: 'true',
initialRotateRate: 0.07
}
}
};
```
--------------------------------
### Initialize and Configure Bitmovin Player X with Individual Packages (HTML/JavaScript)
Source: https://developer.bitmovin.com/playback/docs/player-web-x-getting-started
This code snippet demonstrates initializing the Bitmovin Player Web X and adding various packages individually. It first includes all necessary package scripts via CDN in the HTML head, then uses JavaScript to instantiate the player, attach it to a DOM element, and add functional packages such as 'capabilities', 'segment-processing', 'container-mp4', 'network', and HLS-related packages. Finally, it configures and adds a video source for playback.
```html
Bitmovin Player Web X Demo
```
--------------------------------
### Setup Analytics Collector for IVS Player
Source: https://developer.bitmovin.com/playback/docs/setup-analytics-android-v3
Initializes the Bitmovin Analytics Collector for Amazon IVS Player. Requires an Analytics License key and application context. Attaches the player, sets source metadata, and starts playback. Ensure to detach the player when done, typically before player release.
```kotlin
// Create an AnalyticsConfig using your Bitmovin analytics license key
val analyticsConfig = AnalyticsConfig("")
// Create Analytics Collector for Amazon IVS Player
val analyticsCollector = IAmazonIvsPlayerCollector.Factory.create(applicationContext, analyticsConfig)
// create and set SourceMetadata
val sourceMetadata = SourceMetadata(title="exampletitle", videoId="exampleId")
analyticsCollector.sourceMetadata = sourceMetadata
// Attach your Amazon IVS Player instance
analyticsCollector.attachPlayer(player)
// load and start playing video after attaching
player.load(sourceUri)
player.play()
// Detach your player when you are done.
// For example, call this method before releasing the player
analyticsCollector.detachPlayer()
```
--------------------------------
### Initialize Player with Core Bundle and Packages (TypeScript)
Source: https://developer.bitmovin.com/playback/docs/player-web-x-getting-started
Initializes the Bitmovin Player using the core bundle and extending it with various feature packages. This provides a more customized and modular player instance. It requires merging API types and adding necessary packages.
```typescript
import { Player } from '@bitmovin/player-web-x/bundles/playerx-core';
import { AdaptationPackage } from '@bitmovin/player-web-x/packages/playerx-adaptation.package';
import { CapabilitiesPackage } from '@bitmovin/player-web-x/packages/playerx-capabilities.package';
import { ContainerMp4Package } from '@bitmovin/player-web-x/packages/playerx-container-mp4.package';
import { DataPackage } from '@bitmovin/player-web-x/packages/playerx-data.package';
import { HlsPackage } from '@bitmovin/player-web-x/packages/playerx-hls.package';
import { HlsParsingPackage } from '@bitmovin/player-web-x/packages/playerx-hls-parsing.package';
import { HlsTranslationPackage } from '@bitmovin/player-web-x/packages/playerx-hls-translation.package';
import { NetworkPackage } from '@bitmovin/player-web-x/packages/playerx-network.package';
import { PresentationPackage } from '@bitmovin/player-web-x/packages/playerx-presentation.package';
import { SegmentProcessingPackage } from '@bitmovin/player-web-x/packages/playerx-segment-processing.package';
import { SourcePackage } from '@bitmovin/player-web-x/packages/playerx-source.package';
import { SourcesApiPackage } from '@bitmovin/player-web-x/packages/playerx-sources-api.package';
import { ViewModePackage } from '@bitmovin/player-web-x/packages/playerx-view-mode.package';
import type { ViewModeApi } from '@bitmovin/player-web-x/types/framework/core/view-mode/Types'
import type { SourceApiBase, SourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types'
import type { PlayerApi } from '@bitmovin/player-web-x/types/framework/core/player-api/Types'
type SourceApi = SourceApiBase & ViewModeApi;
type MyApi = PlayerApi & SourcesApi;
const player = Player({
key: 'YOUR-PLAYER-KEY',
defaultContainer: document.getElementById('player-container')
}) as MyApi
player.packages.add(CapabilitiesPackage);
player.packages.add(SegmentProcessingPackage);
player.packages.add(ContainerMp4Package);
player.packages.add(DataPackage);
player.packages.add(NetworkPackage);
player.packages.add(HlsTranslationPackage);
player.packages.add(HlsParsingPackage);
player.packages.add(HlsPackage);
player.packages.add(PresentationPackage);
player.packages.add(SourcePackage);
player.packages.add(AdaptationPackage);
player.packages.add(SourcesApiPackage);
player.packages.add(ViewModePackage);
const sourceConfig = {
resources: [{
url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
}]
}
player.sources.add(sourceConfig);
```
--------------------------------
### JavaScript: Load Source Configuration into Player
Source: https://developer.bitmovin.com/playback/docs/getting-started-web
Loads the defined source configuration into the Bitmovin player instance. This action initiates the playback process, with success and error handling provided via Promises.
```javascript
player.load(sourceConfig).then(function() {
console.log('Successfully loaded Source Config!');
}).catch(function(reason) {
console.log('Error while loading source:', reason);
}
);
```
--------------------------------
### JavaScript: Define Source Configuration
Source: https://developer.bitmovin.com/playback/docs/getting-started-web
Creates a source configuration object that provides the player with all necessary details for loading content. This includes streaming formats (DASH, HLS, Smooth, progressive), poster image, title, description, and DRM configurations.
```javascript
var sourceConfig = {
"title": "Default Demo Source Config",
"description": "Select another example in \"Step 4 - Load a Source\" to test it here",
"dash": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
"hls": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
"smooth": "https://test.playready.microsoft.com/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/manifest",
"progressive": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
"poster": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}
```
--------------------------------
### Add Bitmovin Player SDK via CocoaPods
Source: https://developer.bitmovin.com/playback/docs/getting-started-ios
Integrate the Bitmovin Player SDK into your project by adding the 'BitmovinPlayer' pod to your Podfile with the desired version. After adding, run `pod install` to download and link the dependency.
```ruby
pod 'BitmovinPlayer', 'Version Number'
```
--------------------------------
### Add Bitmovin Player SDK Dependency to Project
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Specifies the Bitmovin Player Android SDK as a project dependency. Replace `{version-number}` with the actual SDK version. This is typically added to the app-level build.gradle file.
```groovy
implementation("com.bitmovin.player:player:{version-number}")
```
--------------------------------
### Get VPN Locations API Response Example
Source: https://developer.bitmovin.com/playback/docs/streamlab-api
An example response from the `GET v1/player/testing/vpn-locations` endpoint. It includes pagination details (`totalCount`, `offset`, `limit`) and an `items` array containing VpnLocation objects.
```json
{
"data": {
"result": {
"totalCount": 1,
"offset": 0,
"limit": 1000,
"items": [
{
"id": "4ff48470-3c45-416c-8013-08360ce320ea",
"name": "Albania"
}
]
}
},
"requestId": "aa6034f6-2432-11f0-91a6-e27f83dd5332",
"status": "SUCCESS"
}
```
--------------------------------
### Get Limits API Response Example
Source: https://developer.bitmovin.com/playback/docs/streamlab-api
An example of the response received when calling the `GET v1/player/testing/limits` endpoint. It includes the `data` object containing the `result` which is the Limit resource, along with `requestId` and `status`.
```json
{
"data": {
"result": {
"activeStreamTargetsLimit": 200,
"streamUrlLimit": 1024,
"monthlyTestExecutionsLimit": 200,
"monthlyTestExecutions": 0,
"activeStreamTargets": 0
}
},
"requestId": "61239fc6-24e8-11f0-b974-e27f83dd5332",
"status": "SUCCESS"
}
```
--------------------------------
### Configure Bitmovin Player Settings in Roku
Source: https://developer.bitmovin.com/playback/docs/getting-started-roku
This code defines a configuration object for the Bitmovin Player in Roku. It includes settings for playback (autoplay, muted), adaptation (preload), and optionally the license key if not set in the manifest. Refer to the setup method documentation for all available parameters.
```javascript
m.playerConfig = {
playback: {
autoplay: true,
muted: false
},
adaptation: {
preload: true
},
key: "YOUR_LICENSE_KEY" ' The license key is only required here if it wasn't added in the manifest as described in step 1.
}
```
--------------------------------
### Configure and Play DRM Content with PlayReady on PS4
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-playstation-4
This JavaScript example illustrates how to configure the Bitmovin Player to play DRM-protected content using PlayReady on PlayStation 4. It specifies the source (DASH/HLS) and includes the necessary PlayReady DRM settings within the SourceConfig.
```javascript
var source = {
dash: 'someurl.mpd',
hls: 'someurl.m3u8',
title: 'Some Nice Title',
drm: {
playready: {
utf8message: true,
plaintextChallenge: true,
headers: {
'Content-Type': 'text/xml',
},
// Only required if the license is persistent
mediaKeySystemConfig: {
sessionTypes: ['persistent-license'],
},
},
},
};
// Passing the DRM-protected source to the player
player.load(source);
```
--------------------------------
### Add Bitmovin Player SDK Repository to settings.gradle.kts
Source: https://developer.bitmovin.com/playback/docs/getting-started-android
Configures the Gradle settings to include the Bitmovin Player SDK release repository. This step is essential for resolving the player dependency. It requires the Google and Maven Central repositories as well.
```kotlin
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {
url = uri("https://artifacts.bitmovin.com/artifactory/public-releases")
}
}
}
```
--------------------------------
### Handle Remote Control Key Events (JavaScript)
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-lg-webos
Sets up event listeners for keyboard input to control player actions like play/pause and seeking. This example demonstrates handling 'Enter' (play/pause toggle) and a specific key code for 'Play' (415), with a fallback for logging other key presses.
```javascript
document.addEventListener('keydown', function (inEvent) {
var keycode;
if (window.event) {
keycode = inEvent.keyCode;
} else if (inEvent.which) {
keycode = inEvent.which;
}
switch (keycode) {
case 13:
tooglePlayPause();
break;
case 415:
// Play Button Pressed
player.play();
break;
// other cases ommitted for readibilty; check out demo repo for full source
default:
console.log('Key Pressed: ' + keycode);
}
});
```
--------------------------------
### Download Bitmovin Player SDK XCFrameworks
Source: https://developer.bitmovin.com/playback/docs/getting-started-ios
Manually add the Bitmovin Player SDK to your project by downloading the necessary XCFrameworks from the provided CDN URLs. Replace `VERSION_NUMBER` with the desired SDK version.
```text
https://cdn.bitmovin.com/player/ios_tvos/VERSION_NUMBER/BitmovinPlayer.zip
https://cdn.bitmovin.com/player/ios_tvos/VERSION_NUMBER/BitmovinPlayerAnalytics.zip
https://cdn.bitmovin.com/player/ios_tvos/VERSION_NUMBER/BitmovinPlayerCore.zip
https://cdn.bitmovin.com/analytics/ios_tvos/VERSION_NUMBER/BitmovinAnalyticsCollector.zip
```
--------------------------------
### Refine analytics query with filtering and grouping in JavaScript
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-analytics-api
Demonstrates refining an analytics query using methods like `filter`, `groupBy`, `orderBy`, and `interval`. This example shows how to count impressions, filter by error codes, group by platform, and specify a date range. Suitable for analyzing errors across different platforms.
```javascript
queryBuilder
.count('IMPRESSION')
.between(fromDate, toDate)
.filter('ERROR_CODE', 'NE', null)
.groupBy('PLATFORM')
.query()
```
--------------------------------
### Include webOS TV Library and Main Script in HTML
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-lg-webos
Includes the webOS TV specific library files and the main JavaScript file (main.js) in index.html. This allows access to TV-specific APIs and player initialization for webOS devices.
```html
```
--------------------------------
### Modular Player Imports: Correct vs. Incorrect
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-modular-player
Demonstrates the correct and incorrect ways to import modules for the Bitmovin modular player. Incorrect imports can lead to unexpected behavior and increased bundle size, while correct imports ensure optimal performance. These examples use JavaScript and assume a Node.js/bundler environment.
```javascript
import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
// Incorrect imports example:
// import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
// import { PlayerEvent } from 'bitmovin-player';
// import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
// import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
```
```javascript
import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
import type { PlayerEvent } from 'bitmovin-player';
import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
```
--------------------------------
### Create Player with Custom Configuration (Swift)
Source: https://developer.bitmovin.com/playback/docs/getting-started-ios
Creates a Bitmovin Player instance with custom configurations for both the player and analytics. Allows specifying a player license key and other player settings alongside the analytics configuration.
```swift
let analyticsConfig = AnalyticsConfig(licenseKey: "")
let playerConfig = PlayerConfig()
playerConfig.key = ""
let player = PlayerFactory.createPlayer(
playerConfig: playerConfig,
analytics: .enabled(analyticsConfig: analyticsConfig)
)
```
--------------------------------
### Initialize Player using HLS Bundle (TypeScript)
Source: https://developer.bitmovin.com/playback/docs/player-web-x-getting-started
Initializes the Bitmovin Player using the pre-built HLS bundle from npm. This approach is simpler for common use cases. It requires a player key and a container element.
```typescript
import { Player } from '@bitmovin/player-web-x/bundles/playerx-hls';
const player = Player({
key: 'YOUR-PLAYER-KEY',
defaultContainer: document.getElementById('player-container')
});
const sourceConfig = {
resources: [{
url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
}]
}
player.sources.add(sourceConfig);
```
--------------------------------
### Install Bitmovin Player React Native SDK (npm/yarn)
Source: https://developer.bitmovin.com/playback/docs/setting-up-your-projects
These commands show how to install the Bitmovin Player React Native SDK using common package managers. Use `npm install bitmovin-player-react-native` or `yarn add bitmovin-player-react-native`. For Expo projects, `npx expo install bitmovin-player-react-native` is recommended to ensure compatibility.
```shell
npm install bitmovin-player-react-native
# or
yarn add bitmovin-player-react-native
# or for Expo projects:
npx expo install bitmovin-player-react-native
```
--------------------------------
### HTML Example: Using v8 Bundle with Player Web X
Source: https://developer.bitmovin.com/playback/docs/player-web-x-v8-compatibility
Demonstrates how to include the v8 bundle for Player Web X in an HTML file. This allows creating a Player Web X instance using the v8 API structure. It includes basic HTML setup, player configuration, and source loading.
```html
Bitmovin Player Demo
```
--------------------------------
### Setup Tizen TV Media Play/Pause and Exit Key Events
Source: https://developer.bitmovin.com/playback/docs/getting-started-with-the-web-player-on-samsung-tizen
This JavaScript function sets up event listeners for Tizen TV hardware keys. It registers the 'MediaPlayPause' key and handles the 'keydown' event to control playback (play/pause) and exit the application using the 'RETURN' button. The Tizen TV Input Device API is required for this functionality.
```javascript
function setupControllerEvents() {
tizen.tvinputdevice.registerKey('MediaPlayPause');
// add eventListener for keydown
document.addEventListener('keydown', function(e) {
switch (e.keyCode) {
case tizen.tvinputdevice.getKey('MediaPlayPause').code:
if (player.isPlaying()) {
player.pause();
} else {
player.play();
}
break;
case 10009: // RETURN button
tizen.application.getCurrentApplication().exit();
break;
default:
console.log('Key code : ' + e.keyCode);
break;
}
});
}
```