Videogular - 显示图像或视频

Question

我在我的 angularjs 应用程序中使用 videogular。 我用视频制作列表，用图像制作另一个列表。当用户在列表中选择视频时 videogular 开始播放所选视频。但是，如果用户从列表中选择图像，我想在 videogular 或同一位置显示所选图像（在 videogular 位置显示新 div，如果选择视频隐藏 div 并显示播放器）。如果有选择的图像，我尝试使用 ng-if 隐藏播放器，如果选择的视频再次显示播放器。

当我尝试这个时，我在控制台中得到一个错误 我从 API 获取我的视频列表

TypeError: 无法读取 null 的属性 'stop'

这是我的代码

<videogular vg-player-ready="ctrl.onPlayerReady($API)" vg-complete="ctrl.onCompleteVideo()" vg-theme="ctrl.config.theme.url">
  <vg-media vg-src="ctrl.config.sources" vg-tracks="ctrl.config.tracks">
  </vg-media>
  <vg-controls style="margin-bottom: 20px;">
    <vg-play-pause-button></vg-play-pause-button>
    <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
    <vg-scrub-bar>
    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
    </vg-scrub-bar>
    <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
    <vg-volume>
    <vg-mute-button></vg-mute-button>
    <vg-volume-bar></vg-volume-bar>
    </vg-volume>
    <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    <vg-overlay-play></vg-overlay-play>
    <vg-poster vg-url='ctrl.config.plugins.poster'></vg-poster>
</videogular>

这里是我从 API 显示视频的列表

<table class="table">
<tr ng-repeat="(key, value) in media" ng-if="value.type === 'video'">
<td width="20%">
  <a ng-click="ctrl.setVideo(key)">
  <img src="{{value.thumbnail}}" alt="" /></a>
</td>
<td width="50%">
  <a ng-click="ctrl.setVideo(key)">{{value.name}}</a>
</td>
<td width="15%">
  <a ng-click="ctrl.setVideo(key)">{{value.type}}</a>
</td>
<td width="15%">
  <angular-smartconfirm confirm="removeRow(value.id)">
    <i class="fa fa-close"></i>
    </smart-confirm>
</td>

........对于带有图像的新表也是如此。

和控制器

  $http.get(serviceBase + 'users/' + user_id + '/media').success(function 
   (data) {
   $scope.media = data.media;
    angular.forEach($scope.media, function (value, key) {
        mediaUrl.push(value.url);
        mediaName.push(value.name);
        mediaType.push(value.type);
        temp = value.url;
        srcName[temp] = value.name;
        sources.push({
            sources: [
                {src: $sce.trustAsResourceUrl(value.url), type: "video/mp4"}
            ]
        });

    });


    controller.videos = sources;
    controller.config = {
        preload: "none",
        autoHide: false,
        autoHideTime: 3000,
        autoPlay: false,
        theme: {
            url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
        },
        plugins: {
            poster: "assets/img/video_poster.png"
        }
    };

    controller.setVideo = function (index) {
        controller.API.stop();
        controller.currentVideo = index;
        controller.config.sources = controller.videos[index].sources;
        $timeout(controller.API.play.bind(controller.API), 100);
    };

});

我尝试在 div 中添加所有 <videogular>...</videogular> 并添加 ng-if="value.type == 'video'"（我从 API 类型的视频或图像中获取）

<div nf-if="value.type == 'video'">
    <videogular>...</videogular>
</div>

如果类型是图像，则在与图像容器相同的位置显示新的 div

<div nf-if="value.type == 'image'">
    <img src="">
</div>

Thnx，抱歉，文本和代码太多

Answer 1

这就是答案。我为隐藏和取消隐藏视频播放器制作了两个功能

 $scope.hideVideogulrPlayer = function() {
  $scope.hidePlayer = false;

}
$scope.unhideVideogulrPlayer = function() {
  $scope.hidePlayer = true;
}

当我们点击任何视频上的视频列表时，我会调用一个函数

ng-click="unhideVideogulrPlayer()"

当我们点击任何图像上的图像列表时，我会调用一个函数

ng-click="hideVideogulrPlayer()"

在 DOM 中，我创建了两个 div。第一个带有视频的 div

 <div class="videogular-container" ng-if="hidePlayer == true">
     <videogular>...</videogular>
 </div>

图片第二...

<div class="videogular-container" ng-if="hidePlayer == false">
     <img middle;" src="{{imageWhenPlayerIsHide}}" width="432px">
 </div>

这样，当我们点击一​​个视频时，videogular 播放器将取消隐藏并开始播放。 单击图像时，我显示与播放器大小相同的 div，并且具有功能，显示单击该 div 中的图像

$scope.showSelectedImage = function (url){
  /* I pass url from ng-repat */
  $scope.imageWhenPlayerIsHide = url;
}