Videogular

Question

我在 angularjs 应用程序中使用 videogular。我用视频制作列表，用图像制作另一个列表。当列表 videogular 中的用户 select 视频开始播放 selected 视频时。但是，如果列表中的用户 select 图片我想在 videogular 或同一个地方显示 selected 图片（在 videogular 地方显示新的 div，如果 select视频隐藏 div 与图像和显示播放器）。如果有 selected 图像，我尝试使用 ng-if 隐藏播放器，如果 selected 视频再次显示播放器。

当我尝试这个时，控制台出现错误我从 API

获取我的视频列表

TypeError: Cannot read property 'stop' of 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>

........对于新的 table 和图像也是如此。

和控制器

  $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()"

在 DOM 中我制作了两个 div。首先 div 与 videogular

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

Videogular - 显示图像或视频

Videogular - show image or video

angularjs