使用 Stream Player

Cloudflare 提供可自定义的 Web 播放器，可播放点播和直播视频，无需额外工程工作。

要将 Stream Player 添加到网页，您可以：

• 在 Cloudflare 仪表板的 Stream 页面为特定视频或直播输入生成嵌入代码。

  Go to Videos ↗

• 使用下面的代码示例，将 <VIDEO_UID> 替换为 video UID（或 signed token），将 <CODE> 替换为您的唯一客户代码（可在 Stream 仪表板中找到）。

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="720"
	width="1280"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

Stream player 也可作为 React ↗ 或 Angular ↗ 组件使用。

• Chrome：88 或更高版本
• Firefox：87 或更高版本
• Edge：89 或更高版本
• Safari：14 或更高版本
• Opera：75 或更高版本

• Android 版 Chrome：90
• Android 版 UC Browser：12.12 或更高版本
• Samsung Internet：13 或更高版本
• iOS 版 Safari：13.4 或更高版本（非全屏时支持速度选择器）

更改 iframe 上的 height 和 width 属性将更改主机页面上显示的 iframe 像素尺寸。

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="400"
	width="400"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

要使 iframe 响应式，需要样式通过将 iframe 设为 position: absolute; 并使其填充使用计算 padding-top 百分比的容器来强制宽高比。

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
	<iframe
		src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
		style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
		allowfullscreen="true"
	></iframe>
</div>

播放器选项通过 iframe src 属性中的查询字符串参数配置。例如：

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

• autoplay 默认值：false

  • 如果 autoplay 标志作为查询字符串参数包含，播放器将尝试自动播放视频。如果您不希望视频自动播放，请完全不要包含 autoplay 标志（而不是设为 autoplay=false）。注意移动浏览器通常不支持此属性，用户必须点击屏幕才能开始视频播放。在使用此属性之前，请考虑移动用户或 Internet 用量有限的用户。

• controls 默认值：true

  • 显示视频控件，如播放/暂停、音量控件按钮。

• defaultTextTrack

  • 将使用指定语言代码的字幕轨道初始化播放器。值应为用于 上传字幕轨道 的 BCP-47 语言代码。如果指定语言代码没有可用字幕，播放器将表现得好像未提供语言代码。

• letterboxColor

  • 提供的任何有效 CSS 颜色值 ↗ 将应用于播放器 UI 的 letterboxing/pillarboxing。可设为 transparent 以避免非全屏模式下的 letterboxing/pillarboxing。

• loop 默认值：false

  • 如果启用，播放器在到达视频末尾时将自动回到开头。

• muted 默认值：false

  • 如果设置，音频将初始静音。

• preload 默认值：none

  • 此枚举选项旨在向浏览器提供关于作者认为将带来最佳用户体验的提示。您可以指定值 preload="auto" 以预加载视频开头。不包含该选项或使用 preload="metadata" 将仅加载开始视频播放所需的元数据。

• poster 默认为视频第一帧

  • 视频开始播放或下载期间显示的图像 URL。如果未指定此属性，将显示视频的缩略图。

• primaryColor

  • 提供的任何有效 CSS 颜色值 ↗ 将应用于播放器 UI 的某些元素。

• src

  • 应包含您上传到 Cloudflare Stream 的视频的 video id。

• startTime

  • 指定播放开始时间的时间戳。如果使用纯数字如 ?startTime=123，将解释为 123 秒。也可以使用更易读的时间戳，如 ?startTime=1h12m27s 表示 1 小时 12 分 27 秒。

• ad-url

  • Stream Player 支持 VAST Tags 以插入 preroll 等广告。如果您有 VAST tag URI，可以通过设置 ad-url 参数传递给 Stream Player。URI 必须使用 JavaScript 的 encodeURIComponent() 等函数进行编码。

视频播放时，可以使用组合键 Shift-D 显示和隐藏 Stream 播放器调试菜单。

直播结束后 60 秒内即可自动生成录制内容。为确保成功的视频观看和播放，请注意以下事项：

• 如果直播在观众观看时结束，观众应等待 60 秒，然后重新加载播放器以观看直播录制。
• 直播结束后，您可以通过 API 检查录制状态。当视频状态为 ready 时，您可以使用 manifest URL 之一流式传输录制。

在直播录制生成期间，视频可能报告为 not-found 或 not-started。

如果 Live Input 启用了 Low-Latency HLS Beta，Stream 播放器将在可能时自动以低延迟模式播放。请参阅 开始直播 以启用此选项。