作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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无法找到VideoController.js页面中Video.html中提到的“<div id="myElement"></div>
”。
请帮助解决该错误。
最佳答案
终于我得到了答案。经过分析,很明显,当调用 VideoController.js 时,Video.html 中定义的“myElement”并未加载。所以我必须在 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
});
});
}]);
关于javascript - JWPlayer 8 中的playerInstance.setup 值未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47038893/
我是一名优秀的程序员,十分优秀!