首页 > 解决方案 > ISSUE 在我的 ionic 应用程序上自动播放 youtube 视频

问题描述

我在我的应用程序中使用 ionic 4,我有视频的离子幻灯片,最好在滑动时自动播放视频。

幻灯片内部有一个<iframe>自动播放 vimeo 或 youtube 视频的幻灯片。vimeo 视频已经使用此解决方案,但 youtube 视频无法正常工作。

<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" frameborder="0" height="100%" width="100%" src="https://player.vimeo.com/video/311263132?autoplay=1&amp;loop=1&amp;background=1&amp;silenciado=1"></iframe>

<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" frameborder="0" src="https://www.youtube.com/embed/CjxugyZCfuw?autoplay=1&amp;version=3&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1&amp;mute=1&amp;playlist=CjxugyZCfuw"></iframe>

这两个代码在 codepen 上自动播放,但是当我将它们放入我的项目时,停止工作。

部分代码如下所示:

<ion-slides>
  <ion-slide *ngFor="let c of contents; let i = index">
    <div *ngIf="c.url | videoPlay as video">
      <iframe [src]="video.url" width="100%" height="100%" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"></iframe>
    </div>
   </ion-slide>
</ion-slides>

videoPlay 仅识别是vimeo还是youtube并根据它添加参数

标签: javascriptionic4

解决方案


推荐阅读