This is an open-source project to enable the use of a third-party component (Yospace) with the Bitmovin Player Web SDK.
This project is not part of a regular maintenance or update schedule. For any update requests, please take a look at the guidance further below.
As an open-source project, we are pleased to accept any and all changes, updates and fixes from the community wishing to use this project. Please see CONTRIBUTING.md for more details on how to contribute.
If you come across a bug related to the player, please raise this through your support ticketing system.
Should you want some help updating this project (update, modify, fix or otherwise) and can't contribute for any reason, please raise your request to your Bitmovin account team, who can discuss your request.
As an open-source project and not a core product offering, any request, issue or query related to this project is excluded from any SLA and Support terms that a customer might have with either Bitmovin or another third-party service provider or Company contributing to this project. Any and all updates are purely at the contributor's discretion.
Thank you for your contributions!
This integration completely encapsulates the usage of Yospace. After creating the player it can be used like a normal Bitmovin Player instance.
- Following the instructions on Yospace Developer 6.4 Step 1 to add Yospace's private npm registry to your setup
- Run
npm install
- Run
npm start
- Install the Yospace Ad Management SDK:
npm i -S @yospace/admanagement-sdk
- Hint: Yospace uses a private NPM registry and you need log in credentials provided by Yospace. Please refer to the Yospace Developer docs for details.
- Install the Bitmovin Player Yospace Integration:
npm i -S @bitmovin/player-integration-yospace
- Import the
BitmovinYospacePlayer
into your code:import { BitmovinYospacePlayer } from '@bitmovin/player-integration-yospace';
- Import the Bitmovin
Player
core into your code:import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
- Add the relevant Bitmovin Player modules to the
Player
object using the staticPlayer.addModule(...)
API. Please note thatbitmovinplayer-advertising-core
andbitmovinplayer-advertising-bitmovin
are required by this integration and must be provided. - Create a new player instance, and pass the
BitmovinPlayerStaticAPI
to it:new BitmovinYospacePlayer(Player, container, config)
- Load a
YospaceSourceConfig
with your Yospace HLS/DASH URL. It's aPlayerConfig
with Yospace-specific extension. Most important extension is theassetType
, which needs to be set. In addition, HLS is picked before DASH, so if the user wants to play a dash stream the hls config has to be omitted.
const playerConfig: PlayerConfig = {
key: 'YOUR-PLAYER-KEY',
};
const playerContainer = document.getElementById('player');
const bitmovinYospacePlayer = new BitmovinYospacePlayer(Player, playerContainer, playerConfig);
// Create the UI afterwards (see https://github.com/bitmovin/bitmovin-player-ui for details)
const uiManager = UIFactory.buildDefaultUI(player);
// Load a new yospace source
const source: YospaceSourceConfig = {
// omit 'hls' field if dash stream is intended
hls: 'your yospace url',
dash: 'your yospace url',
// The type of the asset, can be imported: `import { YospaceAssetType } from '@bitmovin/player-integration-yospace';`
assetType: YospaceAssetType.VOD,
// one of:
// - bitmovin.player.ads.yospace.YospaceAssetType.LINEAR
// - bitmovin.player.ads.yospace.YospaceAssetType.VOD
};
bitmovinYospacePlayer.load(source);
As there can be different rules for different use-cases we provide a BitmovinYospacePlayerPolicy
interface which can be implemented.
In this policy you can define which actions should be allowed during playback.
You can set the policy right after initialization by calling:
bitmovinYospacePlayer.setPolicy(...); // pass in your policy object which implements BitmovinYospacePlayerPolicy
We also provide a default policy.
See BitmovinYospacePlayerPolicy for more details.
You can pass a third optional parameter to the player constructor:
const yospaceConfig: YospaceConfiguration = {
debug: true,
};
// ...
const bitmovinYospacePlayer = new BitmovinYospacePlayer(Player, playerContainer, conf, yospaceConfig);
- Include the following Tweaks to the PlayerConfig:
tweaks: {
...
file_protocol : true, // Required if app is being loaded from file system
app_id : "Ff4zhu5kqV.TizenBitmovinPlayerAppMode" // This should be your Tizen App Id which needs to be allow-listed in Player License and optionally, Analytics License
}
- Make sure the app_id is allow-listed in your Player's License
- In the
YospaceConfig
set the paramYospaceConfig.disableServiceWorker
totrue
- In the
YospaceConfig
set the paramYospaceConfig.useTizen
totrue
// Yospace configuration
const yospaceConfig = {
...
disableServiceWorker: true, // Disable Service Worker for Tizen Web App use
useTizen: true,
};
- Run
npm run build-tv
- Import the
tizen
folder (as General -> Existing Project) into Tizen Studio and run as a Tizen Web Application, or open the folder in Visual Studio Code with the tizen-tv extension.
- Include the following Tweaks to the PlayerConfig:
tweaks: {
...
file_protocol : true, // Required if app is being loaded from file system
app_id : "com.bitmovin.yospace.demo" // This should be your WebOS App Id which needs to be allow-listed in Player License and optionally, Analytics License
}
- Make sure the app_id is allow-listed in your Player's License
- In the
YospaceConfig
set the paramYospaceConfig.disableServiceWorker
totrue
- In the
YospaceConfig
set the paramYospaceConfig.useWebos
totrue
// Yospace configuration
const yospaceConfig = {
...
disableServiceWorker: true, // Disable Service Worker for Tizen Web App use
useTizen: true,
};
- Run
npm run build-tv
- Open the
WebOS
folder in Visual Studio Code with the WebOS TV extension, or use the WebOS CLI directly.
- No support for ad tracking during live streams in Safari if EMSG tags are used. (EMSG tags are not supported by Safari)
- Use node.js version specified in
.nvmrc
- Set up your access to the private npm registry of Yospace
- Run
npm ci
- Use
npm run start
to run a webpack dev server
- This repo uses git-flow and semantic versioning
- PRs should be made against
develop
branch - PRs should always contain an update of the CHANGELOG.md file
- New versions will be manually released into the
main
branch and tagged there - Tagged versions will be manually published to npm
- The Bitmovin Player shall not be packaged into the JS file created by the build of this integration. To achieve this, types can be imported and used, but no code must be imported/used (including string enums!)