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. (Replace your-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