Question

我正在制作一个小应用程序来显示播放器及其视频。为此，我使用了带有不同离子滑片的离子滑动盒，在每张幻灯片上我都有不同的视频。

我只需点击一下按钮，然后全屏显示视频。问题是我无法关闭视频并返回我的应用程序。

你可能想知道为什么我没有嵌入视频，我试图这样做，但所有的视频都可以一起播放，这很烦人，我花了两天时间如何重新拍摄，我没有＆＃39找不到任何解决方案。

这是我的代码：

<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" ng-if="items" >
  <ion-slide  ng-repeat="i in items"> 

         <div  class="video">
    <img class="full-image" style="height:200px"ng-src="{{i.image}}" />
    <a href="https://www.youtube.com/embed/I0riVRmp6G0"></a>
</div>
           <h4>{{i.name}}</h4>       

    <p>{{i.age}}</p>
</div> 
  </ion-slide>
    </ion-slide-box>

控制器：

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.items=friends;


      $scope.slideHasChanged = function(index) {

          $scope.items.push("{name:'John', age:25, gender:'boy'}");
      }

});

var friends = [
  {name:'John', age:25, image:'http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg'},
  {name:'Jessie', age:30, image:'http://www.africatopsports.com/wp-content/uploads/2014/07/Sofiane-feghouli-team-teaser100_v-original-1024x576.jpg'},
  {name:'Johanna', age:28, image:'http://www.footmercato.net/images/a/feghouli-a-fait-mal-au-barca_123563.jpg'},
  {name:'Joy', age:15, image:'http://img.fifa.com/mm/photo/tournament/competition/02/38/72/29/2387229_full-lnd.jpg'},
  {name:'Mary', age:28, image:'http://www.parisfans.fr/wp-content/uploads/2015/05/Mercato-Le-PSG-voudrait-Xavi-pour-une-saison.jpg'}

];

CODEPEN CODE + DEMO

如何使用离子滑动盒在Ionic中显示视频

0 个答案: