CODEWITHSUNDEEP
javascripthtmlangularjsjwplayer
simple user
simple user

Reputation: 383

playerInstance.setup value is coming as undefined in JWPlayer 8

I am facing problem while opening JW Player 8 in modal in Angular JS.

Home.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../Scripts/AngularControllers/HomeController.js"></script>
    <script src="../Scripts/Libraries/JWPlayer/jwplayer.js"></script>
    <script>jwplayer.key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"</script>
    <script src="../Scripts/AngularControllers/VideoController.js"></script>
</head>
<body ng-app="appHome">
    <div ng-repeat="today in todayList">
        <img ng-src="{{today.image}}" ng-click="showVideo(today.desc)">
    </div>
</body>
</html>

HomeController.js

var homeApp = angular.module("appHome", ['ui.bootstrap']);

homeApp.controller("ctrlHome", ['$scope', '$uibModal', function ($scope, $uibModal) {

    $scope.todayList = [
        { image: 'Images/hqdefault.jpg', name: 'ABC ABC ', desc: 'Here I Am ' },
        { image: 'Images/hqdefault.jpg', name: 'DEF', desc: 'I will Rock' }
    ];

    $scope.showVideo = function (videoId) {
        var modalInstance = $uibModal.open({
            templateUrl: 'Video.html',
            controller: 'ctrlVideo',
            size: 'lg',
            resolve: {
                videoId: function () {
                    return videoId;
                }
            }
        })
    }
}]);

Video.html

<div id="myElement"></div>

VideoController.js

var myApp = angular.module('appHome');

myApp.controller("ctrlVideo", ['$scope', 'videoId', function ($scope, videoId) {
    var playerInstance = jwplayer("myElement");
    playerInstance.setup({
        file: "FileName",
        width: 640,
        height: 360
    });
}]);

I am getting below error:-

TypeError: playerInstance.setup is not a function↵

After further analysis I found that Jwplayer is not able to find "<div id="myElement"></div>" mentioned in Video.html inside VideoController.js page.

Please help to resolve the error.

Upvotes: 0

Views: 979

Answers (1)

simple user
simple user

Reputation: 383

Finally I got answer to this. It was pretty clear after analysis that when VideoController.js is called up then at that point of time "myElement" defined in Video.html didn't loaded up. So I have to use something equivalent of document.ready in Angular JS and I modified VideoController.js as below:-

var myApp = angular.module('appHome');

myApp.controller("ctrlVideo", ['$scope', 'videoId', '$timeout', function ($scope, videoId, $timeout) {
     $timeout(function () {
        var playerInstance = jwplayer("myElement");
        playerInstance.setup({
            file: "FileName",
            width: 640,
            height: 360
        });
    });   
}]);

Upvotes: 1

Related Questions