Question

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

当我尝试这个时，我在控制台中出错了我从API

获取了我的视频列表

TypeError：无法读取属性＆＃39;停止＆＃39;为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>

........对于带有图像的新表也一样。

和控制器

  $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，sry太多的文字和代码

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>

有了这个，当我们点击一个视频时，视频播放器就会取消隐藏并开始播放。单击图像时，我显示与播放器大小相同的div，并且通过功能，show显示该div中的图像

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

视频图像 - 显示图像或视频

1 个答案: