playerInstance.setup 值在 JWPlayer 8 中未定义

Question

我在 Angular JS 中以模式打开 JW Player 8 时遇到问题。

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
    });
}]);

我遇到以下错误：-

TypeError: playerInstance.setup is not a function↵

进一步分析发现Jwplayer在[=48中找不到Video.html中提到的“<div id="myElement"></div>” =]页。

请帮忙解决错误。

Answer 1

终于找到答案了。经过分析很清楚，当VideoController.js被调用时，那么"myElement"定义在Video.html 没有加载。所以我必须在 Angular JS 中使用等同于 document.ready 的东西，我修改了 VideoController.js 如下：-

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
        });
    });   
}]);

playerInstance.setup 值在 JWPlayer 8 中未定义

playerInstance.setup value is coming as undefined in JWPlayer 8

javascript

html

angularjs

jwplayer