Pause player by JavaScript

Support
1

Hi,

I’m trying to pause the player by JavaScript. Somehow I can’t figure that out.

Can somebody help?

1 Like
2

Hi @peter.vanvogelpoel

Assuming you have configured your player with something like this

var player = new bitmovin.player.Player(document.getElementById('player'), conf);
player.load(source);

then (if I’m not missing something obvious) you should be able to use e.g.:

<button id="myBtnPause">Pause</button>
<button id="myBtnPlay">Play</button>
<script>
    const element1 = document.getElementById("myBtnPause");
    element1.addEventListener("click", myFunction);

    function myFunction() {
        player.pause();
    }
</script>

<script>
    const element2 = document.getElementById("myBtnPlay");
    element2.addEventListener("click", myFunction);

    function myFunction() {
        player.play();
    }
</script>

Documentation: https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/interfaces/core.playerapi.html#pause

BR
Peder

2 Likes
3

Hi Peder,

Thanks. But I don’t get it to work.
My project is a Blazor WASM project. In my script file I have the following:

function setupBitmovinPlayer(playername, videoname, urlStreamingLink) {
var conf = {
key: ‘xxx’
};

var source = {
    title: videoname,
    progressive: urlStreamingLink
};

var player = new bitmovin.player.Player(document.getElementById(playername), conf);
player.load(source);

};

This works fine.

Then I have:

function pausePlayer() {
player.pause();
};

From the Razor page I run:

JsRuntime.InvokeVoidAsync(“pausePlayer”);

This reaches the function. But nothing happens.

Any advise?

4

Hi Peter,
are you sure your pausePlayer() function has access to the player variable? Looks from your example as the player is only scoped to the setupBitmovinPlayer function thus when you call the other function it won’t be able to resolve the reference.

Try defining the player in a larger scope that should fix the issue.

greetings Daniel

5

That’s what I figured. But I’m not sure how to do that.

Any advise on how to do this in Blazor?

6

Figured it out allready.

I had to put the player var in a script in the index.html and place a hidden player wrapper in there as well.

Then change this var through js functions on the relevant pages.

That worked for me. Maybe there are better ways.

1 Like