Search code examples
angularjsjwplayerng-dialog

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


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>

Solution

    1. 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>
        
    2. 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();
      });