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

AngularJs passing $http.get to video source tag

本文关键字：视频 标签 http get AngularJs      更新时间：2023-09-26

我正试图让我的应用程序控制器使用$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>

控制台输出

当我打开文件时，预加载程序会正确淡出，但我不确定为什么文件无法解析。我几乎可以肯定我走错了路，但是，作为Angular的新手，我不确定如何去做。

非常感谢您的帮助。

尝试使用ng-src="expression"而不是src="{{expression}}"

相关文章：