Jwplayer - Error: jwplayer(...).setup is not a function

Question

I have to show jwplayer in a popup, for popups I am using ngDialog(angular), code for ngDialog is below:

$scope.showVideoPlayerPopup = function(video_path)
{
    $scope.ngDialog = ngDialog;
            ngDialog.open({
                animation: true,
                scope:$scope,
                template:'<div id="video_popup"></div>',
                plain: true,
                //className: 'ngdialog-theme-default',
                closeByDocument: true
                //backdrop : 'static'
            });
        playVideo(video_path);
}

play video function called above contains code for jwplayer, which is below:

<script>
    function playVideo(video_path)
    {
        jwplayer("video_popup").setup({
            file: video_path,
            width: "600px",
            height: "600px",
            stretching: "bestfit",
        });
    }

</script>

when I use the same jwplayer code for simple html code which is without popup it works fine but I try to put my html in popup it gives me below error:

Error: jwplayer(...).setup is not a function

update

Files I have included:

<script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>

Did you add jwplayer.js file? – neelima Oct 17 '16 at 05:45 — neelima, Oct 17 '16 at 05:45

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2021-11-23T19:51:22.597

5

Ensure the jwplayer src is included (you likely already did but in case not:)

Update 11/2021

see the section Cloud-hosted on the documentation page Add a player library. This will require obtaining a JWPlayer account.
1. From your Player Downloads & Keys page, scroll down to the Cloud Hosted Player Libraries section.
2. In the Cloud Hosted Player Libraries section, select a Player Title from the dropdown menu.
3. Copy the Cloud Player Library Url.
4. Within the <head> of your page, copy and paste the URL to the player library.
```
<script src="{cloud_hosted_player_library_url}"></script>
```
Ensure that the panel has loaded before calling the setup function. One way to do this is to register an event listener for ngDialog.opened from the ngDialog (see the Events section of the ngDialog readme):
```
$scope.$on('ngDialog.opened', function (e, $dialog) {
  playVideo();
});
```

edited Nov 23 '21 at 19:51

answered Oct 17 '16 at 05:48

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

Thank you @Sam. Worked perfectly. Saved my day!! – Always_a_learner Oct 17 '16 at 06:54
Where do the docs describe `` is necessary? – Philll_t Nov 06 '20 at 01:25
@Philll_t I can't remember where I found that URL but I have since updated the answer to be congruent with the latest documentation since the previous URL didn't appear to work anymore with the jsbin sample. – Sᴀᴍ Onᴇᴌᴀ Nov 23 '21 at 19:49

score 1 · Answer 2 · answered Oct 17 '16 at 05:40

1

Yes...because your div tag with id "current_video_path" has to be there in DOM before jwplayer(...).setup script can work...May be you can add some delay using $timeout or setTimeout so it will have enough time to render div in popup before this script can wrok..

answered Oct 17 '16 at 05:40

Sweety Webashlar

81
8

1

How can someone determine delay time, always use callback in such cases. – Jaskaran Singh Oct 17 '16 at 06:46
1

@Sweety Webashlar : I have created in my DOM already. Thanks anyway. – Always_a_learner Oct 17 '16 at 06:50
1

yes...can be done..i just wanted to make him realize that there must be timing issue...that was only my main concern. and that was options to quickly check if it was same case for him or not.. – Sweety Webashlar Oct 17 '16 at 06:50

Jwplayer - Error: jwplayer(...).setup is not a function

2 Answers2

Update 11/2021