Web component

With the Web Component you can easily embed an opencast paella player in your website.

Import the paella-opencast-component web component and the CSS file.

import 'paella-opencast-component';
// Import the CSS file if you are using any bundle tool
// or add them to your HTML file.
import 'paella-opencast-component/paella-opencast-component.css';

Add a <paella-opencast-component> component to your page.

<paella-opencast-player
  opencast-presentation-url="https://develop.opencast.org"
  video-id="ID-dual-stream-demo"
/>

Full example

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Paella player example</title>
    <style>
        body {
            margin: 0;
        }
        paella-opencast-player {
            display: block;
            width: 100vw;
            height: 100vh;
        }
    </style>
    <script>
        import 'paella-opencast-component';
    </script>
</head>
<body>
    <paella-opencast-player
        video-id="ID-dual-stream-demo"
        opencast-presentation-url="https://stable.opencast.org"
    />
</body>
</html>

Auto fetching data

Let the component to autofetch the necessary data using the search API

<paella-opencast-player
    video-id="ID-dual-stream-demo"
    opencast-presentation-url="https://develop.opencast.org"
/>

Pass the configuration and the episode data

<paella-opencast-player
    video-id='ID-dual-stream-demo'
    paella-config='...'
    opencast-episode='...'
/>

Web component

Full example

Auto fetching data

Pass the configuration and the episode data

Further reading