Skip to main content

Programmatic Integration

HTML 5​

Basic Video Element​

Here is a basic example of an HTML 5 video element.

<html>
<head>
</head>
<body>
    <div>
        <video
            id="my-video"
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            autoplay 
            muted
            controls
        ></video>
    </div>
</body>
</html>

Add the Embedder​

Let's change the basic example above to something like this:

<html>
<head>
    <script src="https://embed.sourcesync.io"></script>
</head>
<body>
    <div>
        <video
            id="my-video"
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            autoplay 
            muted
            controls
        ></video>
    </div>

    <script>
        // a reference for the embedder instance once it's ready
        let embedderInstance

        // Wait for the library to be loaded
        const onLoaderReady = async () => {
            const SourceEmbeds = await window.SourceEmbedsLoader.load()

            const embedder = SourceEmbeds.register({
                // base settings for embedder
            })

            await embedder.embed({
                // target element
                el: document.getElementById('my-video'),

                // recommended strategy for embedding
                strategy: "direct-iframeless",

                // ID of the distribution to embed
                distributionId: 'getting-started'
            })
            
            // get handler
            embedderInstance = embedder.getInstance(el)
        }

        onLoaderReady()
    </script>
</body>
</html>

Review Changes​

  1. We added the Embedder script to the page.
<script src="https://embed.sourcesync.io"></script>
  • https://embed.sourcesync.io - this is where our Embedder code lives
  • Note: we are not passing any configuration ID to the embedder script. This is because we are going to load the embedder programmatically.
  • Note: we do not load the script with defer, because we want to load the embedder immediately so we can reference the SourceEmbedsLoader global.
  1. We added some JavaScript to the page to load the embedder and embed the video.
  • The code is documented inline, but here is a summary:
    • We wait for the embedder to be loaded.
    • We register the embedder with some base settings.
    • We embed the video element with the embedder.
    • We get a reference to the embedder instance for later use.
  • The complete settings for the embedder are not shown here, but you can find them in the Settings Schema.