javascript - 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&loop=1&background=1&silenciado=1"></iframe>
<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" frameborder="0" src="https://www.youtube.com/embed/CjxugyZCfuw?autoplay=1&version=3&loop=1&controls=0&showinfo=0&enablejsapi=1&mute=1&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并根据它添加参数
解决方案
推荐阅读
- sql-server - 计算两行中两个时间戳之间的持续时间 SQL Server
- cmake - 如何将多个导入的目标合并为一个
- amazon-ecs - 使用 AWS Codepipeline 在 ECS 上的每次部署都会创建一个新版本的任务定义
- c# - 对于每个条目具有多个值的选择列表,如何处理空条目?
- angular - ExpressionChangedAfterItHasBeenCheckedError:将加载器组件与加载器拦截器服务一起使用时
- docker - Docker 没有运行 dist 文件夹
- jenkins - 如何使用 Jenkins 声明式管道状态在 Jenkins 中发布 Jacoco 报告
- c# - Dotnet Core - 无法添加对具有基类的另一个项目的引用
- symfony - 替换 Symfony 容器中的私有服务进行测试
- mysql - 用于计算每天结束时的活跃用户数的 SQL 查询