A custom element for playing through a set of audio and/or video elements.
<html>
<head>
<script type="module" src="https://unpkg.com/media-playlist@0.1"></script>
</head>
<body>
<media-playlist loop>
<media-playlist-item type="video" src="" controls></media-playlist-item>
<media-playlist-item type="audio" src="" controls></media-playlist-item>
<media-playlist-item type="video" src="" controls></media-playlist-item>
</media-playlist>
</body>
</html><media-playlist> is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
Note the type="module", that's important.
Modules are always loaded asynchronously by the browser, so it's ok to load them in the head 👍, and best for registering web components quickly.
<head>
<script type="module" src="https://unpkg.com/media-playlist@0.1"></script>
</head>npm install media-playlist --saveOr yarn
yarn add media-playlistInclude in your app javascript (e.g. src/App.js)
import 'media-playlist';This will register the custom elements with the browser so they can be used as HTML.