Bitmovin Stream Web Component
The Streams web component serves as a wrapper for the Bitmovin Player and provides a simple way to integrate Bitmovin Streams into your website.
Usage
- Add the dependency to your
package.json
and import the web component into your project. - Once its imported, you can use the custom tag
<bitmovin-stream stream-id="your-stream-id" />
to add the web component to your HTML. (Replaceyour-stream-id
with the ID of your stream)
// Import the web component
import { BitmovinStream } from 'bitmovin-streams'
// Add the component to your HTML
<bitmovin-stream stream-id="your-stream-id" />
Usage with React
If you want to use the web component in a React project, you need to do the following changes to your application:
- Add the @lit/react dependency to your project.
- Use the
createComponent
function from@lit/react
to create a React component from the web component. Here is an example how to do that:
// Import dependencies
import {createComponent} from '@lit/react';
import {BitmovinStream} from 'bitmovin-streams';
import React from 'react';
// Create React component
const BitmovinStreamReact = createComponent<BitmovinStream>({
tagName: 'bitmovin-stream',
elementClass: BitmovinStream,
react: React,
});
// Use React component
<BitmovinStreamReact stream-id={"your-stream-id"} />
Known limitations
- The web component relies on the
window
global to be present, therefore it can't be used in server side rendering environments.
Support and Documentation
If you want to know more about Streams visit the official documentation
In case you encounter any issues, have questions or improvement ideas, visit our community and let us know