├── .eslintrc.json ├── .github ├── release-please │ ├── .release-please-manifest.json │ └── release-please-config.json └── workflows │ ├── cd.yml │ └── ci.yml ├── .gitignore ├── .prettierrc ├── README.md ├── examples └── nextjs │ ├── .eslintrc.json │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── app │ ├── cloudflare-video │ │ └── page.tsx │ ├── dash-video │ │ └── page.tsx │ ├── favicon.ico │ ├── globals.css │ ├── hls-video │ │ └── page.tsx │ ├── icon.svg │ ├── jwplayer-video │ │ └── page.tsx │ ├── layout.tsx │ ├── nav.tsx │ ├── page.tsx │ ├── player.tsx │ ├── shaka-video │ │ └── page.tsx │ ├── sidebar-nav.tsx │ ├── spotify-audio │ │ └── page.tsx │ ├── theme-toggle.js │ ├── videojs-video │ │ └── page.tsx │ ├── vimeo-video │ │ └── page.tsx │ ├── wistia-video │ │ └── page.tsx │ └── youtube-video │ │ └── page.tsx │ ├── next.config.mjs │ ├── package.json │ └── tsconfig.json ├── package-lock.json ├── package.json ├── packages ├── castable-video │ ├── CHANGELOG.md │ ├── README.md │ ├── castable-mixin.d.ts │ ├── castable-mixin.js │ ├── castable-remote-playback.js │ ├── castable-utils.js │ ├── castable-video.js │ ├── en-cc.vtt │ ├── index.html │ └── package.json ├── cloudflare-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── cloudflare-video-element.d.ts │ ├── cloudflare-video-element.js │ ├── index.html │ ├── package.json │ └── test │ │ ├── index.html │ │ └── test.js ├── custom-media-element │ ├── CHANGELOG.md │ ├── README.md │ ├── custom-media-element.ts │ ├── examples │ │ ├── aspect-ratio.html │ │ ├── audio.html │ │ ├── empty-source.html │ │ ├── en-cc.vtt │ │ ├── example.js │ │ ├── index.html │ │ ├── media-chrome.html │ │ ├── progressive-enhancement.html │ │ └── safari-bug.html │ ├── package.json │ ├── test │ │ ├── eager-upgrade.html │ │ ├── lazy-upgrade.html │ │ └── test.js │ └── tsconfig.json ├── dash-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── dash-video-element.d.ts │ ├── dash-video-element.js │ ├── index.html │ ├── package.json │ └── test │ │ ├── index.html │ │ └── test.js ├── hls-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── hls-video-element.d.ts │ ├── hls-video-element.js │ ├── index.html │ ├── package.json │ └── test │ │ ├── index.html │ │ └── test.js ├── jwplayer-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── jwplayer-video-element.d.ts │ ├── jwplayer-video-element.js │ ├── package.json │ └── test │ │ ├── index.html │ │ └── test.js ├── media-tracks │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── audio-rendition-list.ts │ │ ├── audio-rendition.ts │ │ ├── audio-track-list.ts │ │ ├── audio-track.ts │ │ ├── global.ts │ │ ├── index.ts │ │ ├── mixin.ts │ │ ├── polyfill.ts │ │ ├── rendition-event.ts │ │ ├── track-event.ts │ │ ├── utils.ts │ │ ├── video-rendition-list.ts │ │ ├── video-rendition.ts │ │ ├── video-track-list.ts │ │ └── video-track.ts │ ├── test │ │ ├── index.html │ │ └── test.js │ └── tsconfig.json ├── shaka-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── server-safe-globals.js │ ├── shaka-video-element.d.ts │ └── shaka-video-element.js ├── spotify-audio-element │ ├── CHANGELOG.md │ ├── README.md │ ├── iframe-api.js │ ├── index.html │ ├── package.json │ ├── spotify-audio-element.d.ts │ ├── spotify-audio-element.js │ └── test │ │ ├── index.html │ │ └── test.js ├── super-media-element │ ├── CHANGELOG.md │ ├── README.md │ ├── example │ │ ├── en-cc.vtt │ │ ├── example.js │ │ └── index.html │ ├── package.json │ ├── super-media-element.d.ts │ ├── super-media-element.js │ └── test │ │ ├── eager.html │ │ ├── lazy.html │ │ └── test.js ├── videojs-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── en-cc.vtt │ ├── index.html │ ├── package.json │ ├── test │ │ ├── index.html │ │ └── test.js │ ├── videojs-video-element.d.ts │ └── videojs-video-element.js ├── vimeo-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── test │ │ ├── index.html │ │ └── test.js │ ├── vimeo-video-element.d.ts │ └── vimeo-video-element.js ├── wistia-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── test │ │ ├── index.html │ │ └── test.js │ ├── wistia-video-element.d.ts │ └── wistia-video-element.js └── youtube-video-element │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── test │ ├── index.html │ └── test.js │ ├── youtube-video-element.d.ts │ └── youtube-video-element.js ├── scripts ├── build-react-wrapper │ ├── CHANGELOG.md │ ├── build.js │ ├── package.json │ └── templates │ │ └── react.ts └── publish-packages │ ├── package.json │ └── publish-packages.js └── turbo.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "globals": { 4 | "globalThis": "writable" 5 | }, 6 | "env": { 7 | "browser": true, 8 | "es6": true 9 | }, 10 | "extends": [ 11 | "eslint:recommended" 12 | ], 13 | "parserOptions": { 14 | "ecmaVersion": 2022, 15 | "sourceType": "module" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/release-please/.release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "examples/nextjs": "0.1.26", 3 | "scripts/build-react-wrapper": "0.2.0", 4 | "packages/castable-video": "1.1.8", 5 | "packages/cloudflare-video-element": "1.3.1", 6 | "packages/custom-media-element": "1.4.3", 7 | "packages/dash-video-element": "0.1.2", 8 | "packages/hls-video-element": "1.5.2", 9 | "packages/jwplayer-video-element": "1.3.1", 10 | "packages/media-tracks": "0.3.3", 11 | "packages/shaka-video-element": "0.6.15", 12 | "packages/spotify-audio-element": "0.1.13", 13 | "packages/super-media-element": "1.4.2", 14 | "packages/videojs-video-element": "1.4.1", 15 | "packages/vimeo-video-element": "1.4.1", 16 | "packages/wistia-video-element": "1.3.1", 17 | "packages/youtube-video-element": "1.5.1" 18 | } 19 | -------------------------------------------------------------------------------- /.github/release-please/release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bump-minor-pre-major": true, 3 | "bump-patch-for-minor-pre-major": false, 4 | "tag-separator": "@", 5 | "include-component-in-tag": true, 6 | "include-v-in-tag": false, 7 | "plugins": ["node-workspace"], 8 | "packages": { 9 | "examples/nextjs": {}, 10 | "scripts/build-react-wrapper": {}, 11 | "packages/castable-video": {}, 12 | "packages/cloudflare-video-element": {}, 13 | "packages/custom-media-element": {}, 14 | "packages/dash-video-element": {}, 15 | "packages/hls-video-element": {}, 16 | "packages/jwplayer-video-element": {}, 17 | "packages/media-tracks": {}, 18 | "packages/shaka-video-element": {}, 19 | "packages/spotify-audio-element": {}, 20 | "packages/super-media-element": {}, 21 | "packages/videojs-video-element": {}, 22 | "packages/vimeo-video-element": {}, 23 | "packages/wistia-video-element": {}, 24 | "packages/youtube-video-element": {} 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.github/workflows/cd.yml: -------------------------------------------------------------------------------- 1 | name: CD 2 | 3 | concurrency: production 4 | 5 | on: 6 | push: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: 20 18 | cache: 'npm' 19 | - run: npm ci 20 | - run: npm run lint 21 | 22 | test: 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/checkout@v4 26 | - uses: actions/setup-node@v4 27 | with: 28 | node-version: 20 29 | cache: 'npm' 30 | - run: npm ci 31 | - run: npm test 32 | 33 | release: 34 | needs: [lint, test] 35 | runs-on: ubuntu-latest 36 | environment: production 37 | permissions: 38 | contents: write 39 | pull-requests: write 40 | id-token: write 41 | 42 | steps: 43 | - uses: google-github-actions/release-please-action@v4 44 | id: release 45 | with: 46 | config-file: .github/release-please/release-please-config.json 47 | manifest-file: .github/release-please/.release-please-manifest.json 48 | 49 | - uses: actions/checkout@v4 50 | # these if statements ensure that a publication only occurs when 51 | # a new release is created: 52 | if: ${{ steps.release.outputs.releases_created == 'true' }} 53 | 54 | - uses: actions/setup-node@v4 55 | with: 56 | node-version: 20 57 | registry-url: 'https://registry.npmjs.org' 58 | if: ${{ steps.release.outputs.releases_created == 'true' }} 59 | 60 | - run: npm ci 61 | if: ${{ steps.release.outputs.releases_created == 'true' }} 62 | 63 | - run: npm run build 64 | if: ${{ steps.release.outputs.releases_created == 'true' }} 65 | 66 | - run: npm exec -c publish-packages 67 | env: 68 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 69 | if: ${{ steps.release.outputs.releases_created == 'true' }} 70 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v4 10 | - uses: actions/setup-node@v4 11 | with: 12 | node-version: 20 13 | cache: 'npm' 14 | - run: npm ci 15 | - run: npm run lint 16 | 17 | test: 18 | runs-on: ubuntu-latest 19 | steps: 20 | - uses: actions/checkout@v4 21 | - uses: actions/setup-node@v4 22 | with: 23 | node-version: 20 24 | cache: 'npm' 25 | - run: npm ci 26 | - run: npm test 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | .turbo/ 4 | coverage/ 5 | dist/ 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "tabWidth": 2, 5 | "useTabs": false, 6 | "semi": true, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "es5", 10 | "bracketSpacing": true, 11 | "arrowParens": "always" 12 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # media-elements 2 | 3 | A collection of HTMLMediaElement compatible elements and add-ons. 4 | 5 | | Name | Description | 6 | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | 7 | | [custom-media-element](packages/custom-media-element) | A custom element for extending the native elements `