bigscreen-player
Advanced tools
bigscreen-player - npm Package Compare versions
Comparing version 5.1.0 to 5.1.1
@@ -1,1 +0,1 @@ | ||
| export { B as BigscreenPlayer, c as LiveSupport, d as MediaKinds, M as MediaState, f as MockBigscreenPlayer, g as PauseTriggers, h as PlaybackStrategy, i as TransferFormat, T as TransportControlPosition, W as WindowTypes } from './main-1d18707c.js'; | ||
| export { B as BigscreenPlayer, c as LiveSupport, d as MediaKinds, M as MediaState, f as MockBigscreenPlayer, g as PauseTriggers, h as PlaybackStrategy, i as TransferFormat, T as TransportControlPosition, W as WindowTypes } from './main-9380338b.js'; |
| { | ||
| "name": "bigscreen-player", | ||
| "version": "5.1.0", | ||
| "version": "5.1.1", | ||
| "description": "Simplified media playback for bigscreen devices.", | ||
@@ -18,2 +18,3 @@ "main": "dist/esm/main.js", | ||
| "prepare": "[ ! -d dist/ ] && npm run build || exit 0", | ||
| "docs": "npx jsdoc -c jsdoc.conf.json", | ||
| "build": "rollup -c rollup.config.js", | ||
@@ -41,2 +42,3 @@ "start": "rollup -c rollup.dev.config.js -w", | ||
| "babel-jest": "^27.0.6", | ||
| "clean-jsdoc-theme": "^3.2.7", | ||
| "eslint": "^7.2.0", | ||
@@ -50,2 +52,3 @@ "eslint-plugin-es5": "1.3.1", | ||
| "jest": "^27.0.6", | ||
| "jsdoc": "^3.6.4", | ||
| "rollup": "^2.54.0", | ||
@@ -52,0 +55,0 @@ "rollup-plugin-livereload": "^2.0.5", |
239
README.md
@@ -11,234 +11,30 @@ <img src="https://user-images.githubusercontent.com/6772464/124460623-7f3d9d80-dd87-11eb-9833-456c9f20bab7.png" width="300" alt="Bigscreen Player logo"/> | ||
| ## Getting Started | ||
| For documentation on using this library, please see our [Getting Started guide](https://bbc.github.io/bigscreen-player/api/tutorial-Getting%20Started.html). | ||
| `$ npm install` | ||
| ## Running Locally | ||
| ### Initialisation | ||
| A playback session can be initialised by simply calling the `init()` function with some initial data. | ||
| The player will render itself into a supplied parent element, and playback will begin as soon as enough data has buffered. | ||
| ```javascript | ||
| import { BigscreenPlayer, MediaKinds, WindowTypes } from 'bigscreen-player' | ||
| // configure the media player that will be used before loading | ||
| // see below for further details of ths config | ||
| // options are: msestrategy, nativestrategy, hybridstrategy | ||
| window.bigscreenPlayer.playbackStrategy = 'msestrategy' | ||
| const bigscreenPlayer = BigscreenPlayer() | ||
| const playbackElement = document.createElement('div') | ||
| const body = document.getElementByTagName('body')[0] | ||
| playbackElement.id = 'BigscreenPlayback' | ||
| body.appendChild(playbackElement) | ||
| const minimalData = { | ||
| media: { | ||
| type: 'application/dash+xml', | ||
| urls: [ | ||
| { | ||
| url: 'https://example.com/video.mpd' | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| const optionalData = { | ||
| initialPlaybackTime: 0, // Time (in seconds) to begin playback from | ||
| media: { | ||
| type: 'application/dash+xml', | ||
| kind: MediaKinds.VIDEO, // Can be VIDEO, or AUDIO | ||
| urls: [ | ||
| // Multiple urls offer the ability to fail-over to another CDN if required | ||
| { | ||
| url: 'https://example.com/video.mpd', | ||
| cdn: 'origin' // For Debug Tool reference | ||
| }, { | ||
| url: 'https://failover.example.com/video.mpd', | ||
| cdn: 'failover' | ||
| } | ||
| ], | ||
| captions: [{ | ||
| url: 'https://example.com/captions/$segment$', // $segment$ required for replacement for live subtitle segments | ||
| segmentLength: 3.84, // Required to calculate live subtitle segment to fetch & live subtitle URL. | ||
| cdn: 'origin' // Displayed by Debug Tool | ||
| }, { | ||
| url: 'https://failover.example.com/captions/$segment$', | ||
| segmentLength: 3.84, | ||
| cdn: 'failover' | ||
| } | ||
| ], | ||
| captionsUrl: 'https://example.com/imsc-doc.xml', // NB This parameter is being deprecated in favour of the captions array shown above. | ||
| subtitlesRequestTimeout: 5000, // Optional override for the XHR timeout on sidecar loaded subtitles | ||
| subtitleCustomisation: { | ||
| size: 0.75, | ||
| lineHeight: 1.10, | ||
| fontFamily: 'Arial', | ||
| backgroundColour: 'black' // (css colour, hex) | ||
| }, | ||
| playerSettings: { // This currently can be used to customise settings for the msestrategy. It is a pass through of all the dash.js player settings. | ||
| failoverSort: failoverSort, // Post failover custom sorting algorithm | ||
| failoverResetTime: 60000, | ||
| streaming: { | ||
| bufferToKeep: 8 | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // STATIC for VOD content, GROWING/SLIDING for LIVE content | ||
| const windowType = WindowTypes.STATIC | ||
| const enableSubtitles = false | ||
| bigscreenPlayer.init(playbackElement, optionalData, windowType, enableSubtitles) | ||
| Install dependencies: | ||
| ```bash | ||
| $ npm install | ||
| ``` | ||
| ### Configuration | ||
| Bigscreen Player has some global configuration that is needed before initialisation. A *playback strategy* may be configured, or defaulted to the native Html5 strategy: | ||
| ```javascript | ||
| window.bigscreenPlayer.playbackStrategy = 'msestrategy' // OR 'nativestrategy' OR 'hybridstrategy' | ||
| You can run Bigscreen Player locally in a dev environment by running: | ||
| ```bash | ||
| $ npm run start | ||
| ``` | ||
| See the [configuration](https://github.com/bbc/bigscreen-player/wiki/Playback-Strategy) wiki page for further details on these strategies. | ||
| This will open a web page at `localhost:8080`. | ||
| ### Reacting to state changes | ||
| State changes which are emitted from the player can be acted upon to by registering a callback. The callback will receive all of the following state changes as the `state` property of the event: | ||
| - `MediaState.STOPPED` | ||
| - `MediaState.PAUSED` | ||
| - `MediaState.PLAYING` | ||
| - `MediaState.WAITING` | ||
| - `MediaState.ENDED` | ||
| - `MediaState.FATAL_ERROR` | ||
| State changes may be registered for before initialisation and will automatically be cleared upon `tearDown()` of the player. | ||
| ```javascript | ||
| const bigscreenPlayer = BigscreenPlayer() | ||
| // The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise. | ||
| var stateChangeToken = bigscreenPlayer.registerForStateChanges(function (event) { | ||
| if(event.state == MediaState.PLAYING) { | ||
| console.log('Playing') | ||
| // handle playing event | ||
| } | ||
| }) | ||
| bigscreenPlayer.unregisterForStateChanges(stateChangeToken) | ||
| ``` | ||
| ### Reacting to time updates | ||
| Time updates are emitted multiple times a second. Your application can register to receive these updates. The emitted object contains the `currentTime` and `endOfStream` properties. | ||
| Time updates may be registered for before initialisation and will automatically be cleared upon `tearDown()` of the player. | ||
| ```javascript | ||
| var bigscreenPlayer = BigscreenPlayer(); | ||
| // The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise. | ||
| var timeUpdateToken = bigscreenPlayer.registerForTimeUpdates(function (event) { | ||
| console.log('Current Time: ' + event.currentTime); | ||
| }); | ||
| bigscreenPlayer.unRegisterForTimeUpdates(timeUpdateToken); | ||
| ``` | ||
| ### Reacting to subtitles being turned on/off | ||
| This is emitted on every `setSubtitlesEnabled` call. The emitted object contains an `enabled` property. | ||
| This may be registered for before initialisation and will automatically be cleared upon `tearDown()` of the player. | ||
| ```javascript | ||
| var bigscreenPlayer = BigscreenPlayer(); | ||
| // The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise. | ||
| var subtitleChangeToken = bigscreenPlayer.registerForSubtitleChanges(function (event) { | ||
| console.log('Subttiles enabled: ' + event.enabled); | ||
| }); | ||
| bigscreenPlayer.unregisterForSubtitleChanges(subtitleChangeToken); | ||
| ``` | ||
| ### Creating a plugin | ||
| Plugins can be created to extend the functionality of the Bigscreen Player by adhering to an interface which propagates non state change events from the player. For example, when an error is raised or cleared. | ||
| The full interface is as follows: | ||
| - `onError` | ||
| - `onFatalError` | ||
| - `onErrorCleared` | ||
| - `onErrorHandled` | ||
| - `onBuffering` | ||
| - `onBufferingCleared` | ||
| - `onScreenCapabilityDetermined` | ||
| An example plugin may look like: | ||
| ```javascript | ||
| function ExamplePlugin (appName) { | ||
| var name = appName; | ||
| function onFatalError (evt) { | ||
| console.log('A fatal error has occured in the app: ' + name); | ||
| } | ||
| function onErrorHandled (evt) { | ||
| console.log('The ' + name + ' app is handling a playback error'); | ||
| } | ||
| return { | ||
| onFatalError: onFatalError, | ||
| onErrorHandled: onErrorHandled | ||
| }; | ||
| } | ||
| ``` | ||
| ```javascript | ||
| var bigscreenPlayer = BigscreenPlayer(); | ||
| var examplePlugin = ExamplePlugin('myApp'); | ||
| bigscreenPlayer.registerPlugin(examplePlugin); | ||
| // initialise bigscreenPlayer - see above | ||
| // you should unregister your plugins as part of your playback cleanup | ||
| // calling with no argument will unregister all plugins | ||
| bigscreenPlayer.unregisterPlugin(examplePlugin); | ||
| ``` | ||
| ## Testing | ||
| The project is unit tested using [Jest](https://jestjs.io/). To run the tests: | ||
| `$ npm test` | ||
| ```bash | ||
| $ npm test | ||
| ``` | ||
| This project currently has unit test coverage but no integration test suite. This is on our Roadmap to address. | ||
| ### Mocking media playback | ||
| When writing tests for your application it may be useful to use the mocking functions provided. This creates a fake player with mocking hook functions to simulate real world scenarios. | ||
| See [here](https://github.com/bbc/bigscreen-player/wiki/Mocking-Bigscreen-Player) for example usage. | ||
| ## Releasing | ||
| 1. Create a PR. | ||
| 2. Label the PR with one of these labels: | ||
| - `semver prerelease` | ||
| - `semver patch` | ||
| - `semver minor` | ||
| - `semver major` | ||
| 2. Label the PR with one of these labels; `semver prerelease`, `semver patch`, `semver minor` or `semver major` | ||
| 3. Get a review from the core team. | ||
@@ -249,8 +45,9 @@ 4. If the PR checks are green. The core team can merge to master. | ||
| ## Documentation | ||
| Bigscreen Player uses JSDocs to autogenerate API documentation. To regenerate the documentation run: | ||
| ```bash | ||
| $ npm run docs | ||
| ``` | ||
| ## API Reference | ||
| The API is documented [here](https://github.com/bbc/bigscreen-player/wiki/API-Reference). | ||
| ## Contributing | ||
@@ -257,0 +54,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by2.68%
7842
Worsened metrics
- Total package byte prevSize
- decreased by-0.39%
276791
- Dev dependency count
- increased by8.33%
26
- Number of lines in readme file
- decreased by-77.78%
58
No dependency changes