使用 admob 展示广告后，无法在 iOS 设备上的 ionic 应用程序的 iframe 内播放嵌入的 youtube 视频

Posted 2023-02-23

【中文标题】使用 admob 展示广告后，无法在 iOS 设备上的 ionic 应用程序的 iframe 内播放嵌入的 youtube 视频

【英文标题】：Can't play embedded youtube video inside an iframe of an ionic app on iOS device after showing an ad with admob

【发布时间】：2016-05-30 15:10:15

【问题描述】：

我正在使用 Ionic 开发一个应用，并且我已经成功实现了显示 YouTube 内容的 iframe。在浏览器上一切正常，但将其编译到 ios 时出现问题。使用 admob 展示广告后。单击嵌入的 youtube 视频的播放按钮时，iframe 不再响应。无需创建横幅视图或其他广告，一切正常。

有人知道为什么会这样吗？

提前致谢。

更新：当我使用 jQuery 更新 iframe 的 src 的按钮时，我可以按下嵌入视频的播放按钮并观看它。在代码中，您会看到先显示视频缩略图并在按下按钮后加载嵌入的 url 的解决方法。

广告服务

function AdService(admobSvc) 

    var service = ;

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

    return service;

    function Interstitial() 
       admobSvc.requestInterstitialAd();
    

    function Banner() 
      admobSvc.createBannerView();
   

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=""  
                     style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>

控制器

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();
    

路线

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'
                
            
        )
        ...

【问题讨论】：

“不工作”不是有效的问题描述。您是否希望有人在没有看到您的代码的情况下找到解决方案？

@polku 我很着急。我希望现在好些了。

哇，我不敢相信，但古老的传说是真实的，有些人实际上可以以正确的方式编辑他们的问题 :) 抱歉，我不能帮助你。

你在使用任何插件吗？你试过github.com/appfeel/admob-google-cordova吗？

@Miquel 是的，我正在使用这个插件，遵循这个minimal reproducible example (github.com/appfeel/admob-google-cordova/wiki/…) 一切正常，除了我之前提到的问题。

【参考方案1】：

尝试在您的根项目 config.xml 中添加此首选项

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