Das eingebettete YouTube-Video kann nicht in einem Iframe einer ionischen App auf einem iOS-Gerät wiedergegeben werden, nachdem eine Anzeige mit admob angezeigt wurde.

Question

Ich entwickle eine App mit Ionic und habe erfolgreich Iframes mit YouTube-Inhalten implementiert. Auf dem Browser funktioniert alles gut, aber es ist ein Problem, es auf iOS zu kompilieren. Nach dem Anzeigen einer Anzeige mit admob. Der iframe reagiert nicht mehr, wenn Sie auf die Wiedergabeschaltfläche des eingebetteten YouTube-Videos klicken. Ohne Banneransichten oder andere Anzeigen zu erstellen, funktioniert alles einwandfrei.

Hat jemand eine Idee, warum das passiert?

Vielen Dank im Voraus.

Update: Wenn ich eine Schaltfläche verwende, die die Quelle des iframe mit jQuery erneuert, kann ich die Wiedergabe-Taste des eingebetteten Videos drücken und es ansehen. Im Code wird die Problemumgehung angezeigt, indem zuerst das Miniaturbild des Videos angezeigt und nach dem Drücken der Taste die eingebettete URL geladen wird.

Die AdService

function AdService(admobSvc) { 

    var service = {}; 

    service.ShowInterstitial = Interstitial; 
    service.ShowBanner = Banner; 

    return service; 

    function Interstitial() { 
     admobSvc.requestInterstitialAd(); 
    } 

    function Banner() { 
     admobSvc.createBannerView(); 
    } 
} 

Der iframe

<div id="button-bar23" class=" button-bar "> 
    <button ng-click="vm.play($index, trailer.embedded)" class=" button button-assertive icon ion-social-youtube ">#{{$index + 1}} {{video.titel}}</button> 
</div> 
<div id="video-container{{$index}}" class="video-container"> 
    <iframe ng-click="vm.play($index)" id="video{{$index}}" src="{{video.thumbnail}}" frameborder="0" allowfullscreen="" width="560" height="315" 
        style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe> 
</div> 

-Controller

function videoCtrl(ApiService, SharingService, AdService) { 

    var vm = this; 

    ... 

    vm.play = function(index, embedded){ 
     console.log(index); 
     $("#video"+index)[0].src = embedded; 
    } 

    vm.change = function() { 
     AdService.ShowInterstitial(); 
    } 
} 

Strecke

angular.module('app.routes', []).config(function ($stateProvider, $urlRouterProvider, $sceDelegateProvider) { 

    $stateProvider 

     .state('menu.videos', { 
      url: '/videos', 
      views: { 
       'side-menu': { 
        templateUrl: 'templates/videos.html', 
        controller: 'videoCtrl as vm' 
       } 
      } 
     }) 
     ... 

Answer 1

Versuchen

<preference name="AllowInlineMediaPlayback" value="true" />