Playback live stream once ended

The answer to this question may be obvious in the docs, but for the life of me I can not seem to get it to work.

I embed Stream into my JS based website for purposes of live streaming events. The live streaming portion works well, no complaints. I am using the Cloudflare Stream Player.

I embed the player with an iframe:

src="https://customer-xxxxxxxxxxxxxxxxxx.cloudflarestream.com/{{ manifestId }}/iframe?autoplay=true&poster={{ image }}" style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true" id="stream-player"

Then use some in-line javascript to manipulate the player:

    const player = Stream(document.getElementById('stream-player'));
    player.addEventListener('play', () => {
      console.log('playing!');
    });
    player.addEventListener('ended', () => {
      console.log('ended!');
    });
    player.play().catch(() => {
      console.log('playback failed, muting to try again');
      player.muted = false;
      player.play();
      player.controls = true;
    });

However, I do not seem to get the live stream playback option. Once the stream has ended I would like people to be able to replay the stream, or for those arriving late to be able to watch the stream from the start.

Any advice to resolve this problem would be appreciated.

This part is a bit new to me, but it sounds like the recorded stream is going to have a different endpoint that you’ll have to GET. I don’t see that in your code.

https://developers.cloudflare.com/stream/stream-live/#transition-from-live-playback-to-a-recording

1 Like