AngularJS中Videogular切换显示视频与图片的实现问题

嘿，我刚好处理过类似的AngularJS + Videogular切换显示的需求，你用ng-if出错大概率是没理清状态管理，或者没处理Videogular销毁重建的细节。咱们一步步来解决：

核心思路 #

我们需要一个状态变量来控制当前显示的是播放器还是图片，同时维护选中的视频/图片数据。这里推荐用selectedMediaType（值为'video'或'image'）作为切换标识，再配合selectedVideo和selectedImage存储选中内容。

具体实现代码 #

HTML结构 #

先把视频列表、图片列表和显示区域的结构写好，用ng-if（或ng-show）控制显示：

<!-- 视频列表 -->
<div class="video-list">
  <div ng-repeat="video in videoList" ng-click="selectVideo(video)" class="video-item">
    {{video.title}}
  </div>
</div>

<!-- 图片列表 -->
<div class="image-list">
  <div ng-repeat="image in imageList" ng-click="selectImage(image)" class="image-item">
    <img ng-src="{{image.thumbnail}}" alt="{{image.alt}}" class="thumb">
  </div>
</div>

<!-- 核心显示区域 -->
<div class="content-container">
  <!-- Videogular播放器 -->
  <videogular 
    ng-if="selectedMediaType === 'video'" 
    vg-player-ready="onPlayerReady($API)"
    class="videogular-container">
    <vg-media vg-src="selectedVideo.sources"></vg-media>
    <vg-controls>
      <vg-play-pause-button></vg-play-pause-button>
      <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
      <vg-scrub-bar></vg-scrub-bar>
    </vg-controls>
  </videogular>

  <!-- 图片显示容器 -->
  <div ng-if="selectedMediaType === 'image'" class="image-display">
    <img ng-src="{{selectedImage.url}}" alt="{{selectedImage.alt}}" class="full-image">
  </div>
</div>

控制器逻辑 #

在控制器里初始化数据、状态变量，以及切换时的处理函数：

angular.module('yourAppName')
.controller('MediaController', function($scope) {
  // 模拟视频和图片数据
  $scope.videoList = [
    { 
      title: '产品演示视频', 
      sources: [{ src: 'assets/videos/demo.mp4', type: 'video/mp4' }] 
    },
    { 
      title: '教程视频', 
      sources: [{ src: 'assets/videos/tutorial.mp4', type: 'video/mp4' }] 
    }
  ];

  $scope.imageList = [
    { 
      url: 'assets/images/screenshot1.jpg', 
      alt: '界面截图1', 
      thumbnail: 'assets/images/thumb1.jpg' 
    },
    { 
      url: 'assets/images/screenshot2.jpg', 
      alt: '界面截图2', 
      thumbnail: 'assets/images/thumb2.jpg' 
    }
  ];

  // 初始化状态：默认显示第一个视频
  $scope.selectedMediaType = 'video';
  $scope.selectedVideo = $scope.videoList[0];
  $scope.selectedImage = null;

  // 选择视频时的处理
  $scope.selectVideo = function(video) {
    $scope.selectedMediaType = 'video';
    $scope.selectedVideo = video;
    // 可选：如果之前播放器在播放，切换后自动播放（按需调整）
    if ($scope.API) {
      $scope.API.play();
    }
  };

  // 选择图片时的处理
  $scope.selectImage = function(image) {
    $scope.selectedMediaType = 'image';
    $scope.selectedImage = image;
    // 切换到图片时暂停播放器，避免后台播放
    if ($scope.API) {
      $scope.API.pause();
    }
  };

  // 保存Videogular的API引用，方便控制播放状态
  $scope.onPlayerReady = function(API) {
    $scope.API = API;
  };
});

关于ng-if的坑和替代方案 #

你之前用ng-if出错，可能是因为：

1. DOM销毁重建：ng-if会完全移除播放器DOM，切换回来时Videogular需要重新初始化，如果需要保留播放进度，得额外存储进度值，在播放器ready后设置：

   // 控制器里新增进度存储
   $scope.playbackTime = 0;
   
   // 播放器ready时恢复进度
   $scope.onPlayerReady = function(API) {
     $scope.API = API;
     if ($scope.playbackTime > 0) {
       $scope.API.seekTime($scope.playbackTime);
     }
   };
   
   // 切换图片前保存进度
   $scope.selectImage = function(image) {
     if ($scope.API) {
       $scope.playbackTime = $scope.API.currentTime;
       $scope.API.pause();
     }
     // ...其他逻辑
   };
   

2. 样式问题：切换时如果容器高度变化，会导致布局跳动，给content-container设置固定宽高即可：

   .content-container {
     width: 800px;
     height: 450px;
     border: 1px solid #eee;
     overflow: hidden;
   }
   .full-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
   }
   

如果不想处理DOM重建的问题，也可以用ng-show/ng-hide替代ng-if，这样播放器DOM只是隐藏不会销毁，状态会自动保留，但会占用少量内存，根据你的需求选择就行。

内容的提问来源于stack exchange，提问作者Arter