AngularJs passing $http.get to video source tag
Question
I am trying to get my app controller load a fullscreen background video using $http.get and then on success subsequently pass that data into a video source tag. I figured this was the best way so that I could also pass a variable loading to a preloader div obstructing the view of the video, that will fadeout once the video is loaded using ng-show="loading".
app.js
app.controller('main', function($scope, $http) {
$scope.loading = true;
$http.get('assets/bg.mp4')
.success(function (data) {
$scope.video = data;
console.log("video loaded");
})
.catch(function (err) {
console.log("error occured");
})
.finally(function () {
$scope.loading = false;
});
index.html
<body ng-controller="main">
<div id="preloader" ng-show="loading"></div>
<video autoplay id="bg" loop>
<source src="{{ video }}" type="video/mp4">
</video>
</body>
when I open the file the preloader fades out correctly but I am unsure why file is not resolving. I am almost certain I am going about this the wrong way but, being new the Angular I am unsure how to go about it.
Any help greatly appreciated.
1 answers
solution1
0 2015-10-28 13:27:38
尝试使用ng-src="expression"代替src="{{expression}}"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.