Stream Player API

为进一步控制和自定义，我们提供额外的 JavaScript SDK，您可以用它控制视频播放并监听媒体事件。

要使用此 SDK，请在网站中添加额外的 <script> 标签：

<!-- You can use styles and CSS on this iframe element where the video player will appear -->
<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"
  id="stream-player"
></iframe>

<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>

<!-- Your JavaScript code below-->
<script>
  const player = Stream(document.getElementById('stream-player'));
  player.addEventListener('play', () => {
    console.log('playing!');
  });
  player.play().catch(() => {
    console.log('playback failed, muting to try again');
    player.muted = true;
    player.play();
  });
</script>

方法

play() Promise
- 开始视频播放。
pause() null
- 暂停视频播放。

属性

autoplay boolean
- 设置或返回是否设置了 autoplay 属性，允许加载后立即开始视频播放。

buffered TimeRanges readonly
- 符合 TimeRanges 接口的对象。此对象已规范化，意味着范围有序、不重叠、非空且不接触（相邻范围合并为一个更大的范围）。
controls boolean
- 设置或返回视频是否应显示控件（如播放/暂停等）
currentTime integer
- 返回当前播放时间（秒）。设置此值将定位视频到新时间。
defaultTextTrack
- 将使用指定语言代码的字幕轨道初始化播放器。值应为用于上传字幕轨道的 BCP-47 语言代码。如果指定语言代码没有可用字幕，播放器将表现得好像未提供语言代码。

duration integer readonly
- 返回视频时长（秒）。
ended boolean readonly
- 返回视频是否已结束。
letterboxColor string
- 提供的任何有效 CSS 颜色值 ↗ 将应用于播放器 UI 的 letterboxing/pillarboxing。可设为 transparent 以避免非全屏模式下的 letterboxing/pillarboxing。
loop boolean
- 设置或返回视频到达末尾时是否应重新开始
muted boolean
- 设置或返回是否应与视频一起播放音频
paused boolean readonly
- 返回视频是否暂停
played TimeRanges readonly
- 符合 TimeRanges 接口的对象。此对象已规范化，意味着范围有序、不重叠、非空且不接触（相邻范围合并为一个更大的范围）。
preload boolean
- 设置或返回元素加载时是否应预加载视频。

primaryColor string
- 提供的任何有效 CSS 颜色值 ↗ 将应用于播放器 UI 的某些元素。
volume float
- 设置或返回音量，从 0.0（静音）到 1.0（最大值）

事件

标准 Video 元素事件

我们支持大多数标准化媒体元素事件 ↗。

abort — 播放中止时发送。
canplay — 有足够数据可以播放媒体时发送。
canplaythrough — 整个媒体可以不中断播放时发送。
durationchange — 元数据已加载或更改，表明媒体时长发生变化。
ended — 播放完成时发送。
error — 发生错误时发送。
loadeddata — 媒体的第一帧已完成加载。
loadedmetadata — 媒体的元数据已完成加载。
loadstart — 开始加载媒体时发送。
pause — 播放状态更改为暂停时发送。
play — 播放状态不再暂停时发送。
playing — 媒体有足够数据开始播放时发送。
progress — 定期发送以通知媒体下载进度。
ratechange — 播放速度更改时发送。
seeked — seek 操作完成时发送。
seeking — seek 操作开始时发送。
stalled — 用户代理尝试获取媒体数据但数据意外未 forthcoming 时发送。
suspend — 媒体加载暂停时发送。
timeupdate — 元素 currentTime 属性指示的时间已更改。
volumechange — 音频音量更改时发送。
waiting — 请求的操作因等待另一个操作完成而延迟时发送。

非标准事件

非标准事件以 stream- 为前缀，以区别于标准事件。

stream-adstart — 当存在 ad-url 属性且广告开始播放时触发
stream-adend — 当存在 ad-url 属性且广告完成播放时触发
stream-adtimeout — 当存在 ad-url 属性且广告加载时间过长时触发