Stream Player API javascript play and pause methods not working

Hello

On my company, we developed the workflow to use Cloudflare Stream Upload, and Cloudflare Stream Player to upload and playe users videos.

All process are working as expected, exception for the Stream Player API, which we need use to play and pause videos. On player, play and pause works well clicking on the player. But we can not get work by javascript Stream Player API.

We mount the video with iframe tag:

<iframe
    id="stream_timeline"
    src="https://customer-xxxxxxxxxxxxxx.cloudflarestream.com/videoID/iframe"
    allow="accelerometer; gyroscope; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
></iframe>

As the viewer actions on page, we need pause or play the video. We are trying this, but without sucess:

let iframe = document.getElementById("stream_timeline");
let player = Stream(iframe); 
player.play().catch((error) => {
    	console.log("Error: ", error);
}).then(() => {
        console.log("Play sucess");
});

No errors are found at console, and the promises never get resolved, even to catch error:

We can see some properties being updated on player variable, like player.currentTime or player.muted, which indicates that the player variable has an instance of the video in fact, but the pause() and play() methods still not working.

Any tips how to solve?

Regards

@bruno5 — are you loading the Stream Player SDK onto the page where your Javascript code runs?

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

Thanks for your reply.

Yes, we are loading the script before use it:

<!-- Cloudflare Stream -->
<script type="text/javascript" src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>

The Stream() function by Stream Player API exist, and do not trigger any error.

Regards

Hello

I’ve found the issue.

We was handling the events at a external javascript file.

The play and pause methods only works when define the player var exactly after the iframe on HTML declaration. Only works doing this way:

<iframe
    id="stream_timeline"
    src="https://customer-xxxxxxxxxxxxxx.cloudflarestream.com/videoID/iframe"
    allow="accelerometer; gyroscope; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
></iframe>
let iframe = document.getElementById("stream_timeline");
let player = Stream(iframe);

Using this way, we can call play and pause on a external JS file with:

player.play();

It’s a strange behaviour, I don’t know why, but works this way.

Thanks