1

我有一个基本的 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)
  });

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

<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}}"无效。为什么 Videogular 不能从 中获取视频$scope？

我试图将我的视频源从控制器中$scope放入controller.config，但这从来没有奏效。我明天应该再试一次吗？（已经很晚了，我很困惑，试图弄清楚为什么我不能将视频源从控制器中$scope放入controller.config。）

4

1 回答 1

0

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

...

是的，这有效！我写了一个 Videogular 最小安装教程，使用$scope代替controller.config. 我不明白为什么官方的如何开始教程使用controller.config而不是$scope.

...

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

在控制器中，当用户单击“猫视频”按钮时，处理程序访问 Firebase 存储上的猫视频数组，使用 遍历数组forEach，为数组中的每个视频创建一个用于 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>

我会继续努力的！

于 2017-03-10T13:38:44.397 回答