# Pause player by JavaScript

**URL:** <https://community.bitmovin.com/t/pause-player-by-javascript/1313>\
**Category:** Support\
**Created:** [September 27, 2022, 6:31am UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313 "2022-09-27T06:31:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter.vanvogelpoel](https://avatars.discourse-cdn.com/v4/letter/p/edb3f5/32.png) [@peter.vanvogelpoel](https://community.bitmovin.com/u/peter.vanvogelpoel)\
**Post date:** [September 27, 2022, 6:31am UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/1 "2022-09-27T06:31:28Z")

</div>

Hi,

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

Can somebody help?

---

<div class="post-metadata">

**Author:** ![peder.borg](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/peder.borg/32/357_2.png) [@peder.borg](https://community.bitmovin.com/u/peder.borg)\
**Post date:** [September 27, 2022, 6:49am UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/2 "2022-09-27T06:49:58Z")

</div>

Hi @peter.vanvogelpoel

Assuming you have configured your player with something like this

```auto
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.:

```auto
<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](https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/interfaces/core.playerapi.html#pause)

BR  
Peder

---

<div class="post-metadata">

**Author:** ![peter.vanvogelpoel](https://avatars.discourse-cdn.com/v4/letter/p/edb3f5/32.png) [@peter.vanvogelpoel](https://community.bitmovin.com/u/peter.vanvogelpoel)\
**Post date:** [September 27, 2022, 8:30am UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/3 "2022-09-27T08:30:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tigraine](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/tigraine/32/156_2.png) [@tigraine](https://community.bitmovin.com/u/tigraine)\
**Post date:** [September 27, 2022, 8:36am UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/4 "2022-09-27T08:36:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![peter.vanvogelpoel](https://avatars.discourse-cdn.com/v4/letter/p/edb3f5/32.png) [@peter.vanvogelpoel](https://community.bitmovin.com/u/peter.vanvogelpoel)\
**Post date:** [September 27, 2022, 3:49pm UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/5 "2022-09-27T15:49:06Z")

</div>

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

Any advise on how to do this in Blazor?

---

<div class="post-metadata">

**Author:** ![peter.vanvogelpoel](https://avatars.discourse-cdn.com/v4/letter/p/edb3f5/32.png) [@peter.vanvogelpoel](https://community.bitmovin.com/u/peter.vanvogelpoel)\
**Post date:** [September 27, 2022, 5:21pm UTC](https://community.bitmovin.com/t/pause-player-by-javascript/1313/6 "2022-09-27T17:21:19Z")

</div>

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.