DEV Community: Sebastian Ljungman

End-to-end testing with our Chaos Stream Proxy

Sebastian Ljungman — Wed, 22 Jun 2022 15:55:51 +0000

Testing the behavior of a video player when there is something wrong with the video source used to be a tedious task: You had to either manually create or hunt down different broken streams to test different errors, and even then you couldn't always know for sure that the same error would always occur with the same timing.

To address this problem, Eyevinn has released its Chaos Stream Proxy as open-source! As the name suggests, this is a very handy tool for proxying an adaptive bitrate stream and deterministically introducing corruptions to it.

This tutorial will demonstrate how to use the Proxy in the end-to-end testing of the open-source Eyevinn WebPlayer, using Playwright.

Using the Chaos Stream Proxy

A demo of the Chaos Stream Proxy, which we'll use for the purpose of this tutorial, is currently running here.

The Proxy supports both HLS and MPEG-DASH streaming formats, and easily lets us add different corruptions by adding a stringified JSON object as a query parameter to the proxied URL. If we take this HLS URL:

https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8

it can be played with no problems, for example in the Eyevinn WebPlayer, hosted here. But, if we proxy it through the Chaos Stream Proxy, and set &statusCode=[{i:*,code:404}]:

https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&statusCode=[{i:*,code:404}]

we'll instead get 404 errors for all segments (because we set i:*; it's also possible to specify individual segments).

For specifying other types of corruptions, check out the project's README.

EPAS and the Eyevinn WebPlayer

The Eyevinn WebPlayer implements Eyevinn Player Analytics Specification (EPAS), which is an open specification that defines a standard for implementing analytics in any video/audio player. This means that we have a format for event reporting that we expect the WebPlayer to follow.

User interactions are easy enough to create for the sake of validating the EPAS implementation, and thanks to the Chaos Stream Proxy, manifest related errors are now also a piece of cake!

Setting up Playwright

Playwright is a powerful end-to-end test runner, which we're using to automatically test our code in a real browser environment. At the time of writing, we're adding a dependency for "@playwright/test": "^1.19.2" in our package.json(this is a Node.js project). We also add the script "test:e2e": "playwright test".

Our playwright.config.ts is in the project root, and looks like this:

import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  testDir: "tests/",
  workers: 3,
  use: {
    trace: 'on-first-retry',
    // Necessary to get the media codecs to play video (default 'chromium' doesn't have them) 
    channel: 'chrome'
  },
  webServer: {
    command: 'npm run examples',
    port: 1234,
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
export default config;

testDir points to the folder where we put our test .spec.ts files; examples in the npm run examples command is a folder in our root directory, in which we put the HTML files that Playwright will use.

Note that channel: 'chrome' is necessary for our tests to run; the default setting is chromium, which doesn't include the necessary media codecs for video playback . This may cause issues with automated workflows and running tests on Firefox and Webkit, but works locally in Chrome.

In our examples folder, we add an index.html HTML file that includes a link to our Chaos Stream Proxy HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Examples</title>
</head>
<body>
  <a href="chaos-proxy/index.html">Chaos Stream Proxy Example</a>
</html>

As well as the Chaos Stream Proxy HTML index.html file in the sub-folder chaos-proxy:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Chaos Stream Proxy Example</title>
  <script async src="../../packages/web-player-component/dist/web-player.component.js"></script>
</head>
<body>
  <!-- VOD: With segment delay of 1500ms and response code 400 on sixth (response of 400 will be sent after 1500ms): -->
  <eyevinn-video
    source="https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&delay=[{i:5,ms:1500}]&statusCode=[{i:5,code:400}]"
    muted autoplay>
  </eyevinn-video>
  <!-- VOD: With response of status code 404 on all segments: -->
  <eyevinn-video
  source="https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&statusCode=[{i:*,code:404}]"
  muted autoplay>
</eyevinn-video>
</body>
</html>

This file imports the compiled version of Eyevinn WebPlayer Component from the repository, which let's us embed the WebPlayer as web components with the <eyevinn-video> tags.

In our tests folder, we add chaos-proxy.specs.ts, which will be run automatically when we run the npm run test:e2e script:

import { test } from '@playwright/test';

  test('player sends error events when loading corrupt streams', async ({page}) => {
    const [request] = await Promise.all([
      page.goto('/chaos-proxy/index.html'),
      page.waitForRequest(req => req.url().match('https://sink.epas') && req.method() === 'POST' && req.postDataJSON().event === "warning" && req.postDataJSON().payload.code === "400"),
      page.waitForRequest(req => req.url().match('https://sink.epas') && req.method() === 'POST' && req.postDataJSON().event === "warning" && req.postDataJSON().payload.code === "404"),
    ]);
  });

We make asynchronous calls to the goto and waitForRequest methods, available on the pageobject. We check that the POST requests conform to the expected format: If both matching requests are made within 30 seconds, the test passes!

We run the test with npm run test:e2e, and this should be the result:

Success!

Bonus: Playwright Test for VSCode and debug mode

Playwright is developed my Microsoft, so perhaps it shouldn't come as a surprise that there is an excellent VS Code extension available.

With this extension, it's a breeze to run individual tests in isolation, add breakpoints and more!

It also gives easy access to debug mode, which lets us view and interact with the test in the test runner browser:

Creating an Apple TV app with SwiftUI

Sebastian Ljungman — Wed, 25 May 2022 08:57:14 +0000

In 2019, Apple launched its new UI paradigm SwiftUI, which is meant to replace the existing Interface Builder. It lets us create apps for all Apple platforms, including Apple TV's tvOS.

In this tutorial, we'll see how we can build a tvOS app that loads HLS streams from XML/MRSS files, displays them to the user for selection and plays back the selected stream. The streams will be specified in an .xcconfig configuration file, and either bundled at buildtime or downloaded at runtime depending on if local files or http(s):// URL:s are specified.

Tools we'll be using include Xcode and the CocoaPods package SWXMLHash, for parsing our XML input.

Being a relatively new framework, the number of learning resources for SwiftUI are still smaller than for Interface Builder, and the ones that are available tend to focus on the iOS platform. Fortunately though, there are very few things which differ when using SwiftUI: UI elements and user interactions are automatically suited to the platform we're building for.

If you're new to Swift, I recommend following along with the playground in Apple's tutorial. To learn SwiftUI, Apple has an excellent tutorial project, which goes through many important features. For understanding this tutorial though, the first chapter, SwiftUI Essentials, should suffice. The guide is for iOS, but I was able to follow the steps for tvOS and get a working app, with only minor changes.

Although I will include some important snippets of code in this blog post, I recommend that you clone the project to get the full picture. As with many of our cool projects here at Eyevinn, the code is open source, so feel free to fork and play around with it!

Setting up

We start by creating an Xcode project for the app, making sure we select tvOS as our platform. I've used the project name EyevinnTV.

We also set up SWXMLHash in the same project folder by following these instructions. If you're using an M1 Mac, it may be easier installing CocoaPods through Brew than RubyGems (at least it was for me).

To open the project together with the SWXMLHash dependency, we use the .xcworkspace file created after running pod install rather than the .xcodeproj.

Building the ContentView

SwiftUI is all about different nested Views, and the main View in our app is the ContentView, which is called in the EyevinnTVApp.swift file. The EyevinnTVApp struct in this file conforms to the App protocol, and is preceded by the @main attribute, indicating that this is the entry point into our app.

Besides the automatically generated ContentView, we also create a VideoItemObject.swift file, and VideoView.swift file. The former will contain a simple Class that represents our video objects:

class VideoItem: Identifiable {
    var title = ""
    var id = ""
    var videoUrl = ""
    var thumbnailUrl = ""
}

Note that it should conform to the Identifiable protocol, as this will let us iterate over an array of VideoItem with ForEach loops.

In ContentView, we import SWXMLHash, and define a class videoUrlObject that conforms to ObservableObject:

class videoUrlObject: ObservableObject {
    @Published var currentVideoUrl = ""
    @Published var currentVideoTitle = ""
}

Conforming to ObservableObject in the parent View is important, as this will let us pass in the currentVideoUrl with the @Published attribute to its child View VideoView, and synchronize changes to it by making it an ObservedObject:

@ObservedObject var currentVideoUrlObject: videoUrlObject

In ContentView we create two state arrays of VideoItem objects, to which we will push the video items after parsing them. We also initialize our videoUrlObject with the @StateObject attribute:

    @State var videoItems = [VideoItem]()
    @State var liveVideoItems = [VideoItem]()
    @StateObject var currentVideoUrlObject = videoUrlObject()

In the body of ContentView, we nest the different child Views that make up our UI; a main NavigationView, with either the video selection menu or VideoView being rendered, depending on whether the currentVideoUrl variable is set to en empty string (default) or the URL of one of the video items.

In the video selection menu, we display two carousels of videos, one intended for VOD content, and the other for live content. Each video object is rendered as a Button View, displaying its thumbnail (as an AsyncImage) and title. When clicking the Button, the currentVideoUrl property of the currentVideoUrlObject is set to the videoUrl of the corresponding VideoItem; this triggers a reload of the content inside our Navigation View, and the VideoView is rendered in place of the video selection menu.

Building the VideoView

Besides creating the ObservedObject, we also import AVKit to create an instance of the VideoPlayer View. On creation, we use the onAppear() hook to load the currentVideoUrl of the ObservedObject. It's also essential that we set a frame size of 1920X1080 points; this lets the player know that we're displaying the video in fullscreen. If we don't, no playback controls will be displayed!

We also override the default behavior of pressing the Back/ Menu button on the remote, to set the value of the currentVideoUrl property to an empty string. This will trigger a reload, replacing the VideoView with the video selection menu in our ContentView.

Setting up the build configuration

In a SwiftUI app, necessary project files are bundled at buildtime. This means that we can include our lists of videos as XML files, which will be available at runtime through Bundle.main.path like this:

Bundle.main.path(forResource: myVideos, ofType: "xml")

In this project, we also want to support input in the form of an http:// or https:// URL, or a file:// URL that points to an XML file somewhere on the compiling computer, which we make available at runtime.

To enable this, we'll create an Config.xcconfig build configuration file that sets the values of keys in a dictionary:

VOD_XML = https:\/\/testcontent.mrss.eyevinn.technology/
LIVE_XML = liveTestContentMrss

Notice that we're escaping the double backslashes in URL:s. This is because "//" signifies the start of a comment in .xcconfig files, which is not what we want! The backslashes still become part of the value though, so we'll need to remove them later to get the correct URL. If our URL:s contain spaces, we may also have to replace these with %20.

We'll also need to add these entries to the project's Info.plist, which is used to store build settings for the target:

After building the project, we can access the set values with:

Bundle.main.infoDictionary?["VOD_XML"] as! String).replacingOccurrences(of: "\\", with: ""

Here we are removing the backslashes with replacingOccurences.

Copy files from file:// URL:s

Now we can access both bundled files and remote URL:s, but what about local files outside the project? For this, we're going to write a Swift script that detects file:// URL:s, reads and copies their content to bundled XML files at buildtime.

We add a new Swift file, in my case Scripts/CopyXml.swift, and create a new build phase in which we compile and run our script:

Note that the order of the build phases matters, as the script needs to be run before the Copy Bundle Resources phase.

In case the URL entered by the user is invalid, we define an error:

enum fileReadError: Error {
    case invalidFileUrl(String)
}

And add the throws keyword to the main function of the file.

We still want to read the values of VOD_XML and LIVE_XML in our Info.plist, but as we've yet to create our bundle, Bundle.main.infoDictionary is not available to us. Instead, we'll use ProcessInfo.processInfo.environment["VOD_XML"] to access it as an environmental variable. We'll also access the location of our project's root directory with the key SRCROOT.

We then check if the values start with the file:// protocol, in which case we attempt to load the contents of the file. If the loading fails, we throw the fileReadError that we defined. The error message will be printed in the build log rather than the console, as will any other error messages/prints that may occur when running buildtime scripts.

If the loading is successful, we construct a file:// URL pointing to either liveContentCopy.xml or vodContentCopy.xml, depending on if the input file:// URL is in LIVE_XML or VOD_XML. These files should be in the project root for the project to work, and copied to the app bundle in the Copy Bundle Resources phase. We write to these file:// URL with data.write(to: bundleFileUrl!), which either overwrites the existing file's data, or creates a new one if the file is missing.

It's worth noting that even if the files exist in the file system (i.e. were added through Finder, the terminal or in our code), they are not automatically referenced in the Xcode project. If we were to delete these files through the Xcode navigator and pass file URL:s in our Config.xcconfig, the data.write call in our code would create the new files in the file system, but Xcode would not see the files.

The solution is to add the files in the Project Navigator inside Xcode, as this will create a reference to the files, so that they can be copied to the app bundle in the Copy Bundle Resources phase.

Parsing XML/MRSS input

We should now have our input, either as an http(s):// URL, or the name of a bundled file (either added directly and referred to by name, or copied from en external file:// URL to either liveContentCopy or vodContentCopy).

We want our app to support MRSS feeds, which is a standard for distributing media over RSS. Here's an example of what liveContentCopy might look like, after reading from a file:// URL from LIVE_XML in our script:

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
   <channel>
      <title>Eyevinn Live Example Streams</title>
      <link>https://www.eyevinntechnology.se/</link>
      <description>Contains live streams generated by Eyevinn Technology</description>
      <atom:link href="http://ENTER_FEED_URL_HERE_IF_UPLOADING.xml" rel="self" type="application/rss+xml" />
      <item>
         <title>Stockholm Office Weather</title>
         <description>A live RTSP stream of the weather otuside Eyevinn's Stockholm office</description>
         <guid isPermaLink="false">https://d2fz24s2fts31b.cloudfront.net/out/v1/6484d7c664924b77893f9b4f63080e5d/manifest.m3u8</guid>
         <media:category>All</media:category>
         <media:category>Weather</media:category>
         <media:content url="https://d2fz24s2fts31b.cloudfront.net/out/v1/6484d7c664924b77893f9b4f63080e5d/manifest.m3u8">
            <media:title type="plain">Stockholm Office Weather</media:title>
            <media:description type="html">A live RTSP stream of the weather otuside Eyevinn's Stockholm office</media:description>
            <media:thumbnail url="https://picsum.photos/id/1056/200/100.jpg" />
         </media:content>
      </item>
      <item>
         <title>HLS SSAI</title>
         <pubDate>Thu, 12 Oct 2017 00:00:00 -0700</pubDate>
         <link>http://sample-firetv-web-app.s3-website-us-west-2.amazonaws.com/spectators/</link>
         <description>A live stream of virtual racing action, with stitched in ads from Eyevinn's SSAI server</description>
         <guid isPermaLink="false">https://edfaeed9c7154a20828a30a26878ade0.mediatailor.eu-west-1.amazonaws.com/v1/master/1b8a07d9a44fe90e52d5698704c72270d177ae74/AdTest/master.m3u8</guid>
         <media:category>All</media:category>
         <media:category>Racing</media:category>
         <media:content url="https://edfaeed9c7154a20828a30a26878ade0.mediatailor.eu-west-1.amazonaws.com/v1/master/1b8a07d9a44fe90e52d5698704c72270d177ae74/AdTest/master.m3u8">
            <media:title type="plain">Spectators</media:title>
            <media:description type="html">A live stream of virtual racing action, with stitched in ads from Eyevinn's SSAI server</media:description>
            <media:thumbnail url="https://picsum.photos/id/1070/200/100.jpg" />
         </media:content>
      </item>
   </channel>
</rss>

We also want to support a more plain style of RSS/XML, which could look like this:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>livetestcontent.mrss.eyevinn.technology</id>
    <title>Feed for LIVE Test-Content</title>
    <updated>2022-05-05</updated>
    <entry>
        <title>HLS LIVE</title>
        <id>LIVE_1</id>
        <link>https://d2fz24s2fts31b.cloudfront.net/out/v1/6484d7c664924b77893f9b4f63080e5d/manifest.m3u8</link>
        <image>https://picsum.photos/id/1056/200/100.jpg</image>
    </entry>
    <entry>
        <title>HLS LIVE SSAI</title>
        <id>LIVE_2</id>
        <link>https://edfaeed9c7154a20828a30a26878ade0.mediatailor.eu-west-1.amazonaws.com/v1/master/1b8a07d9a44fe90e52d5698704c72270d177ae74/AdTest/master.m3u8</link>
        <image>https://picsum.photos/id/1070/200/100.jpg</image>
    </entry>
</feed>

In our ContentView, we add some code to read the value of VOD_XML and LIVE_XML from our Info.plist, and we either use their values or, in the case of a file:// URL, the name of the copy destinations:

    private var vodXml: String = ((Bundle.main.infoDictionary?["VOD_XML"] as! String).replacingOccurrences(of: "\\", with: "").prefix(7) == "file://") ?
    "vodContentCopy" : (Bundle.main.infoDictionary?["VOD_XML"] as! String).replacingOccurrences(of: "\\", with: "")

We also define a loadData() function, which we call in an .onAppear() hook attached to our Navigation View. loadData() will check the values of vodXml and liveXml, and either skip them, load them with a URLSession or from one of the bundled files:

    func loadData() {
        let xmlsIndexed = [vodXml, liveXml].enumerated()

        for (index, xml) in xmlsIndexed {
            let isLive = index == 1 ? true : false

            if xml == "" {
                continue
            } else if xml.prefix(7) == "http://" || xml.prefix(8) == "https://" {
                let url = URL(string: xml)
                let task = URLSession.shared.dataTask(with: url! as URL) {(data, response, error) in
                    if data != nil {
                        let feed = NSString(data: data!, encoding: String.Encoding.utf8.rawValue)! as String
                        parseXML(feed: feed, isLive: isLive)
                    }
                }
                task.resume()
            } else {
                let filenameInBundle = Bundle.main.path(forResource: xml, ofType: "xml")
                let data = NSData(contentsOfFile: filenameInBundle!)

                if data != nil {
                    let feed = NSString(data: data! as Data, encoding: String.Encoding.utf8.rawValue)! as String
                    parseXML(feed: feed, isLive: isLive)
                }
            }
        }
    }

loadData() calls the function parseXML(), which should look like this:

    func parseXML(feed: String, isLive: Bool) {
        let xml = SWXMLHash.parse(feed)

        //For XML feed in correct format (see README)
        for elem in xml["feed"]["entry"].all
        {
            let videoItem = VideoItem()
            videoItem.title = elem["title"].element!.text
            videoItem.id = elem["id"].element!.text
            videoItem.videoUrl = elem["link"].element!.text
            videoItem.thumbnailUrl = elem["image"].element?.text != nil ? elem["image"].element!.text : ""
            isLive ? liveVideoItems.append(videoItem) : videoItems.append(videoItem)
        }

        //For MRSS feed in correct format (see README)
        for elem in xml["rss"]["channel"]["item"].all
        {
            let videoItem = VideoItem()
            videoItem.title = elem["title"].element!.text
            videoItem.id = elem["guid"].element!.text
            videoItem.videoUrl = (elem["media:content"].element?.attribute(by: "url")!.text)!
            videoItem.thumbnailUrl = (elem["media:content"]["media:thumbnail"].element?.attribute(by: "url")!.text) != nil ? (elem["media:content"]["media:thumbnail"].element?.attribute(by: "url")!.text)! : ""
            isLive ? liveVideoItems.append(videoItem) : videoItems.append(videoItem)
        }
    }

In the function, we first call the parse() function of SWXMLHash on our input, and then iterate over the returned SWXMLHash.XMLIndexer value. Depending on the format of the input, we'll either iterate over every entry inside the feed, or every item inside the channel; create an VideoItem object for each, and append it to either our liveVideoItems or videoItems array.

Wrapping up

And with that, we should have a working tvOS SwiftUI app!

If you found something to be unclear, or you've gotten stuck, I would once again encourage you to clone the project.

I would also encourage you to check out the links below, which I found very helpful while working on this project!

Useful resources:

Parsing XML Using Swift

Swift Build Scripts

ObservedObject

VideoPlayer

Creating a video player web component

Sebastian Ljungman — Thu, 24 Feb 2022 14:35:33 +0000

Eyevinn has an open-source web player that can play both HLS and MPEG-DASH streams, automatically selecting the appropriate library for either format.

You can check it out here! It's simple to use: Just enter a manifest URI and press "LOAD" (or use one of the preset buttons).

Voilà! If we want to share a link to the page with our manifest URI of choice, we can use the "SHARE" button.

But what if we want to embed the player on our own web page? Then we can click the "EMBED" button to display a code snippet. We copy this snippet, paste it into our HTML file, and we should see an eyevinn-video element on our webpage.

How does this work? It's thanks to the use of web components.



<script type="text/javascript" src="https://unpkg.com/@eyevinn/web-player-component@0.1.1/dist/web-player.component.js"></script>
<eyevinn-video source="https://f53accc45b7aded64ed8085068f31881.egress.mediapackage-vod.eu-north-1.amazonaws.com/out/v1/1c63bf88e2664639a6c293b4d055e6bb/ade303f83e8444d69b7658f988abb054/2a647c0cf9b7409598770b9f11799178/manifest.m3u8" muted autoplay ></eyevinn-video>

The snippet consists of two parts:

A script tag containing the web component code
An eyevinn-video custom element

Let's have a look at the code:



import WebPlayer from '@eyevinn/web-player-core';
import { renderEyevinnSkin } from '@eyevinn/web-player-eyevinn-skin';
import style from '@eyevinn/web-player-eyevinn-skin/dist/index.css';

export default class PlayerComponent extends HTMLElement {
  static get observedAttributes() {
    return ['source', 'starttime', 'muted', 'autoplay'];
  };
  constructor() {
    //Call constructor of HTMLElement
    super();
    //Attach shadow DOM
    this.attachShadow({ mode: 'open' });
    const { shadowRoot } = this;
    //Create style and attach to shadow DOM
    let styleTag = document.createElement('style');
    styleTag.innerHTML = style;
    shadowRoot.appendChild(styleTag);
    //Create wrapper and attach to shadow DOM
    const wrapper = document.createElement('div');
    shadowRoot.appendChild(wrapper);
    //Create video element and attach to shadow DOM
    this.video = document.createElement('video');
    wrapper.appendChild(this.video);
    //Init player and skin
    this.player = new WebPlayer({ video: this.video });
    renderEyevinnSkin({
      root: wrapper,
      player: this.player,
      castAppId: {}
    });
  }

  attributeChangedCallback(name) {
    if (name === 'source') {
      if (this.hasAttribute('source')) {
        this.player.load(this.getAttribute('source')).then(() => {
          if (this.hasAttribute('starttime')) {
            this.video.currentTime = this.getAttribute('starttime');
          }
          if (this.hasAttribute('autoplay')) {
            this.player.play();
          }
        });
      }
      else {
        console.error("Invalid source was provided to <eyevinn-video> element");
      }
    }
    if (name === 'muted') {
      if (this.hasAttribute("muted")) {
        this.video.muted = true;
      }
      else {
        this.video.muted = false;
      }
    }
  }

  connectedCallback() {
    this.setupEventProxy();
  }

  disconnectedCallback() {
    this.player.reset();
  }

  setupEventProxy() {
    if (!this.player) return;
    this.player.on('*', (event, data) => {
      this.dispatchEvent(new CustomEvent(event, { detail: data }));
    });
  }
}
//Register custom element
customElements.define('eyevinn-video', PlayerComponent);

First off, we need to import the necessary libraries. We then create a custom class for our web component, PlayerComponent, which extends the basic HTMLElement class. The class contains several observedAttributes; as the name implies, these are the attributes of the custom element that we want to observe.

When an observedAttribute is changed, the attributeChangedCallback function is triggered. The function has the properties name, oldValue and newValue, and we use the the name property to determine which code to run. For example, when name === 'source', this means that the source attribute of the element has been changed. In that case we want to load the new manifest URI, and apply other attributes if present, such as starttime.

As for the constructor, it's important to first call the constructor of the super class HTMLElement, to give our custom element its basic functionality. And rather than appending the elements inside our class to the DOM directly, we're using a shadow DOM: This encapsulates code inside our web component, ensuring that it doesn't affect anything outside it.

Besides attributeChangedCallback, we also have access to other callback functions, including connectedCallback and disconnectedCallback, which are run when the component is added to or removed from the DOM. In our case, we want to initiate an event proxy with our setupEventProxy function when the component is added, and reset the player when the component is removed.

Finally, in order for our custom element to be used in the regular DOM, we need to register it with customElements.define. This will allow us to add our PlayerComponent in our HTML under the name eyevinn-video.

That's it! We can now include as many eyevinn-video elements as we want on our webpage. We can also add our own style to the element with CSS. Keep in mind that for the super class HTMLElement, the default value of the display property is inline. In the example below, an HLS stream and an MPEG-DASH stream are playing on the same webpage, both using our web player component. The attributes starttime, muted and autoplay were set for both videos, resulting in automatic, muted (required by browsers for autoplay) playback starting at the specified times.

You might be wondering why we should go through the effort of making our own web components, instead of using iFrame: iFrames have been around forever, and are still the most common way of embedding external HTML on webpages. They are also supported by older browsers.

Web components, however, give greater control over what parts to include, and may offer both search engine optimization and performance benefits.