视频-显示图像或视频

Question

我在我的angularjs应用程序中使用视频。我用视频制作列表，用图像制作另一个列表。当用户在列表中选择视频时，视频开始播放选定的视频。但是，如果用户从列表中选择图像，我希望在视频或同一位置显示选定的图像(在视频区域上显示新的div，如果选择了视频隐藏div和图像并显示播放器)。我尝试使用ng-如果有选择的图像隐藏播放器，如果选择的视频显示播放器再次。

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

TypeError:无法读取null的属性“停止”

这是我的密码

<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>

........And同样适用于一个新表和用于图像的表。

和控制器

  $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>

以及过多的文本和代码。

Answer 1

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

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

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

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

ng-click="unhideVideogulrPlayer()"

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

ng-click="hideVideogulrPlayer()"

在多姆里我做了两次。带视频的第一个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>

有了这个，当我们点击一个视频，视频播放器是解除隐藏和开始播放。单击图像时，我将显示与播放机大小相同的div，并使用函数显示在该div中单击的图像。

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