AngularJs将$ http.get传递给视频源标记

时间:2015-10-28 13:22:47

标签: javascript html angularjs video

我正在尝试让我的app控制器使用$ http.get加载全屏背景视频,然后成功后将该数据传递到视频源代码中。我认为这是最好的方式,所以我也可以将变量加载传递给阻止视频视图的预加载器div,一旦使用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>

console output

当我打开文件时,预加载器正确淡出,但我不确定为什么文件没有解析。我几乎可以肯定我会以错误的方式解决这个问题但是,作为Angular的新人我不确定如何去做。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

尝试使用ng-src="expression"代替src="{{expression}}"