视频角度视频播放器控制器中异步数据和`this.config`的问题
问题描述:
我使用的是用于Angular的Videogular视频播放器。在HTML代码如下所示:视频角度视频播放器控制器中异步数据和`this.config`的问题
<div ng-controller="ShowController as controller" class="videogular-container">
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources" vg-tracks="controller.config.tracks" vg-native-controls="true"></vg-media>
</videogular>
</div>
在控制器中的代码看起来像这样玩我的视频存储在火力地堡贮存:
app.controller('ShowController', ['$sce', function($sce) {
this.config = {
preload: "auto",
sources: [
{src: $sce.trustAsResourceUrl("https://firebasestorage.googleapis.com/v0/b/myFirebaseApp.appspot.com/o/videos%2Fen%2Fkingfisher.webm?alt=media&token=b4840120-e531-4699-a757-4e0d999ce9d1"), type: "video/webm"}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
}
};
}]);
这伟大的工程,只要我只想播放一个视频。但是从视频数组动态选择,我写了这个:
app.controller('ShowController', ['$scope', '$firebaseStorage', '$sce', function($scope, $firebaseStorage, $sce) {
var ref = firebase.database().ref();
var obj = $firebaseObject(ref.child($routeParams.id));
obj.$loaded(
function(data) {
console.log("Loaded!")
console.log(data === obj);
$scope.wordObject = data;
console.log($scope.wordObject.videos[0].videoURL);
console.log($scope.wordObject.videos[0].videoMediaFormat);
this.config = {
preload: "auto",
sources: [
{src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
}
};
},
function(error) {
console.log("Error: ", error)
});
}]);
的videoURL
和videoMediaFormat
日志就好了。但是视频源和主题都不会加载到HTML视图中。问题似乎是移动this.config
更改了this
所指的对象。什么是this.config
在做什么?
我可以使用call
或apply
将this
绑定到控制器吗?
答
我想通了:
app.controller('ShowController', ['$scope', '$firebaseObject', '$sce', function($scope, $firebaseObject, $sce) {
// Create Firebase reference
var ref = firebase.database().ref();
var obj = $firebaseObject(ref.child($routeParams.id));
$scope.wordObject = obj;
var controller = this;
obj.$loaded(
function(data) {
console.log(data === obj);
$scope.wordObject = data;
// video player
controller.config = {
preload: "auto",
sources: [
{src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat},
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
}
};
},
function(error) {
console.log("Error: ", error)
});
}]);