Registry /
web-framework / cloudflare-video-element
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
cloudflare-video-element
✓ import 'cloudflare-video-element';
✗ const CloudflareVideoElement = require('cloudflare-video-element');
This is a side-effect import that registers the `<cloudflare-video>` custom element with the browser. It does not export a named class for direct instantiation. Ensure this script runs before your custom element is rendered in the DOM.
CloudflareVideoElement (type)
✓ import type { CloudflareVideoElement } from 'cloudflare-video-element';
✗ import { CloudflareVideoElement } from 'cloudflare-video-element';
While the custom element is registered via a side-effect import, you can import its TypeScript type for better type checking when interacting with the element programmatically via `document.querySelector<CloudflareVideoElement>('cloudflare-video')`.
This quickstart demonstrates how to include and use the `<cloudflare-video>` custom element in an HTML page, both declaratively and with basic programmatic control using JavaScript, mimicking the standard HTMLMediaElement API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloudflare Video Element Quickstart</title>
<!-- Load from CDN (or bundle your npm import) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/cloudflare-video-element@latest/+esm"></script>
<style>
cloudflare-video {
width: 100%;
max-width: 640px;
display: block; /* Custom elements are inline by default */
margin: 20px auto;
border: 1px solid #ccc;
background-color: #000;
}
</style>
</head>
<body>
<h1>Cloudflare Video Element Demo</h1>
<p>This demonstrates the <code><cloudflare-video></code> custom element playing a Cloudflare stream,
with standard HTMLMediaElement controls and API.</p>
<cloudflare-video controls autoplay muted loop
src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4"
style="--media-accent-color: #007bff;"
></cloudflare-video>
<p>Programmatic control example:</p>
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
<button id="muteButton">Toggle Mute</button>
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
<script type="module">
const videoElement = document.querySelector('cloudflare-video');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
const muteButton = document.getElementById('muteButton');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
if (videoElement) {
playButton.addEventListener('click', () => videoElement.play());
pauseButton.addEventListener('click', () => videoElement.pause());
muteButton.addEventListener('click', () => videoElement.muted = !videoElement.muted);
videoElement.addEventListener('timeupdate', () => {
currentTimeSpan.textContent = formatTime(videoElement.currentTime);
});
videoElement.addEventListener('durationchange', () => {
durationSpan.textContent = formatTime(videoElement.duration);
});
videoElement.addEventListener('loadedmetadata', () => {
durationSpan.textContent = formatTime(videoElement.duration);
});
}
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}
</script>
</body>
</html>
Errors
Common errors & fixes
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "cloudflare-video" has already been used with this Registry.
The `cloudflare-video-element` script, which registers the custom element, has been loaded or imported multiple times.
fixEnsure the `import 'cloudflare-video-element';` statement or the CDN script tag is present only once in your application's lifecycle, typically at your main entry point or in the HTML head.
The custom element <cloudflare-video> has not been defined.
You are attempting to use the `<cloudflare-video>` tag in your HTML before the JavaScript responsible for registering this custom element has executed.
fixVerify that your `import 'cloudflare-video-element';` statement or `<script type="module" src="..."></script>` tag is loaded and executed *before* the `<cloudflare-video>` element appears in the document. Place script tags in the `<head>` or use deferred/async loading strategies carefully.
Audit
Dependencies
custom-media-elementrequiredProvides a base class for custom media elements, abstracting common `HTMLMediaElement` behaviors and ensuring API compatibility. This package likely extends or utilizes it internally.