Question

我有一个基本的Videogular视频播放器设置来播放Firebase存储中的视频。在HTML视图中，这可以工作：

<div ng-controller="MyController as controller" class="videogular-container">
  <videogular vg-theme="controller.config.theme.url">
    <vg-media vg-src="controller.config.sources" vg-native-controls="true"></vg-media>
  </videogular>
</div>

在控制器中，这可以工作：

var ref = firebase.database().ref();  // Create Firebase reference
var obj = $firebaseObject(ref.child($routeParams.id)); // get the record with the key passed in from the URL

var controller = this; // controller refers to the controller object

obj.$loaded( // wait until the async data loads from the remote Firebase
  function(data) {
    // video player
    controller.config = { // provides an object to the controller
      preload: "auto",
      sources: [
        // My Firebase video
        {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat},
        // The Videogular test videos
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
      ],
      theme: {
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
      }
    };
  },
  function(error) {
    console.log("Error: ", error)
  });

一切正常，播放一个视频。现在我想按主题动态访问视频数组。例如，用户点击查看我的所有猫视频或点击另一个按钮以查看我的所有狗视频。我在$scope上有Firebase存储网址，ng-repeat打印出视图中的网址：

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12 text-center">
    <h3>{{currentTheme}}</h3>
    <div>
      <div ng-repeat="video in currentVideos">
        {{video.videoURL}}
      </div>
    </div>
  </div>
</div>

这也很有效。因此，要使用我的所有猫视频分割出一系列视频播放器，我必须为每个视频制作一个ng-repeat新视频播放器，vg-src来自$scope：

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12 text-center">
    <h3>{{currentTheme}}</h3>
    <div>
      <div ng-repeat="video in currentVideos">

        <div ng-controller="MyController as controller" class="videogular-container">
          <videogular vg-theme="controller.config.theme.url">
            <vg-media vg-src="{{video.videoURL}}" vg-native-controls="true"></vg-media>
          </videogular>
        </div>

      </div>
    </div>
  </div>
</div>

这不起作用。错误是Error: [$parse:syntax]，这意味着存在Angular语法错误。当我将vg-src更改回vg-src="controller.config.sources"时，语法错误消失了：

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12 text-center">
    <h3>{{currentWord}}</h3>
    <div>
      <div ng-repeat="video in currentVideos">

      <div ng-controller="EnglishController as controller" class="videogular-container">
        <videogular vg-theme="controller.config.theme.url">
          <vg-media vg-src="controller.config.sources" vg-native-controls="true"></vg-media>
        </videogular>
      </div>

      </div>
    </div>
  </div>
</div>

有效。问题是vg-src="controller.config.sources"有效但vg-src="{{video.videoURL}}"不起作用。为什么不能使用$scope的视频源视频？

我尝试将$scope中的视频来源放到控制器中的controller.config上，但这从未奏效。我明天应该再试一次吗？（现在已经很晚了，我很难弄清楚为什么我无法将$scope中的视频源放到控制器中的controller.config上。）

Answer 1

在我上床睡觉之前，我写了这个问题，然后醒来（我希望是）答案。 {{video.videoURL}}会插入视频的网址。 controller.config.sources插入一个包含很多东西的对象。我将尝试制作一组已配置的对象，看看会发生什么！

...

是的，那很有用！我使用$scope代替controller.config撰写了tutorial for a Videogular minimum install。我不明白为什么官方How To Start tutorial使用controller.config代替$scope。

...

当用户点击“猫视频”时，我可以从我的猫视频阵列中播放一个视频，但我无法让ng-repeat分出数组中的所有视频。

在控制器中，当用户点击“Cat视频”按钮时，处理程序访问Firebase存储上的cat视频数组，使用forEach遍历数组，对于数组中的每个视频，它创建一个变量for videoSource和视频文件格式的另一个变量（videoSourceType），然后创建一个包含源数组和主题的videoObject，然后将videoObject推送到数组$ scope.videoObjects。

$scope.videoObjects = [];
  $scope.showVideosOfTheme = function() {
    theme.videos.forEach(function(video) { // iterate through the array of videos
          var i = 0;
          var videoSource = $scope.currentVideos[i].videoURL; // set the video source
          var videoSourceType = $scope.currentVideos[i].videoMediaFormat; // set the video format
          var videoObject = { // make a video object
            preload: "auto",
            sources: [
              {src: $sce.trustAsResourceUrl(videoSource), type: "video/" + videoSourceType},
            ],
            theme: {
              url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
            }
          };
          $scope.videoObjects.push(videoObject);
          i++;
        });
};

在HTML视图中，ng-repeat遍历数组$ scope.videoObjects和fdor每个视频对象使用主题和源旋转出一个新的Videogular视频播放器。这不起作用，错误消息是错误：[$ parse：syntax]，换句话说，Angular语法错误。

<div ng-repeat="video in videoObjects" class="videogular-container">
  <videogular vg-theme="{{video.theme.url}}">
    <vg-media vg-src="{{video.sources}}" vg-native-controls="true"></vg-media>
  </videogular>
</div>

我会继续努力！

为什么Videogular将视频源放在controller.config而不是$ scope？

1 个答案: