如何将Cloudflare Stream流加载到<video>标签并正常播放？

你当前的问题出在用错了地址类型：https://iframe.cloudflarestream.com/[视频哈希]是Cloudflare Stream提供的iframe嵌入地址，不是直接的视频媒体源（比如MP4、HLS流地址），所以直接放到<video>的src里肯定无法解析播放。

下面给两种可行的解决办法：

方法1：官方推荐的iframe嵌入方式 #

这是最简单且兼容最好的方案，Cloudflare的iframe已经封装了所有播放所需的逻辑（包括DRM、自适应码流处理）：

<iframe 
  src="https://iframe.cloudflarestream.com/hash-codexyzxcvasdpoiuasdfl-asdfasdfjl;k" 
  frameborder="0" 
  allowfullscreen
  width="640"
></iframe>

方法2：获取直接媒体源，用

如果一定要用<video>标签，需要先获取视频的原生媒体流地址（HLS/DASH），步骤如下：

1. 登录Cloudflare Dashboard，找到对应视频的详情页，在「播放」选项卡下复制HLS或DASH的播放URL（格式类似https://customer-[ID].cloudflarestream.com/[视频哈希]/manifest/video.m3u8）
2. 因为原生<video>对HLS的支持在部分浏览器（比如Firefox）中有限，建议用hls.js库来兼容所有浏览器：

<!-- 引入hls.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video 
  class="video-upload" 
  id="questionVideob8db400536" 
  controls="true" 
  width="640"
></video>

<script>
const video = document.getElementById('questionVideob8db400536');
const hlsUrl = 'https://customer-[你的ID].cloudflarestream.com/hash-codexyzxcvasdpoiuasdfl-asdfasdfjl;k/manifest/video.m3u8';

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(hlsUrl);
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    // 可选：加载完成后自动播放
    // video.play();
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari原生支持HLS
  video.src = hlsUrl;
}
</script>

注意事项 #

• 如果你的视频是私有视频，需要生成带签名的播放URL，具体可以在Cloudflare Stream的控制台或API中配置签名参数
• 不要直接使用iframe的URL作为<video>的src，这种地址本身返回的是HTML页面，不是媒体文件

内容的提问来源于stack exchange，提问作者manaclan