Opción recomendada. Usa el player oficial de Cloudflare Stream.
<div id="video-container"></div>
<script>
fetch('https://TU-BACKEND.com/api/videos/ID/signed-url')
.then(res => res.json())
.then(data => {
document.getElementById('video-container').innerHTML = `
<stream
src="${'${data.data.cloudflare_video_id}'}"
controls
preload="auto"
style="width:100%;height:auto;"
></stream>
`;
});
</script>
<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>
Usa Video.js con la URL HLS firmada para máximo control.
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="360"></video>
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
<script>
fetch('https://TU-BACKEND.com/api/videos/ID/signed-url')
.then(res => res.json())
.then(data => {
videojs('my-video', {
sources: [{ src: data.data.signed_url, type: 'application/x-mpegURL' }]
});
});
</script>
Opción más sencilla usando un iFrame.
<div id="video-container"></div>
<script>
fetch('https://TU-BACKEND.com/api/videos/ID/signed-url')
.then(res => res.json())
.then(data => {
const videoId = data.data.cloudflare_video_id;
const token = new URL(data.data.signed_url).searchParams.get('token');
document.getElementById('video-container').innerHTML = `
<iframe
src="https://customer-HASH.cloudflarestream.com/${videoId}/iframe?token=${token}"
style="border:none;width:100%;height:500px;"
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
allowfullscreen
></iframe>
`;
});
</script>