Javascript 使用youtube iframe进行角度ng滑动

我试图用图像和youtube视频构建简单的滑块。我想让它在触摸设备上正常工作，所以我想使用angular的

ngTouch

模块中的

ng swipe-*

。不幸的是，在youtube的iframe上滑动不起作用。我试图设置较低的

z-index:-10，但是我不能播放视频

你知道如何解决这个问题吗

有一个片段：


var-app=angular.module（'app'，['ngTouch']）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.msg=函数（msg）{
警报（msg）；
}
});
。好的{
宽度：300px；
高度：100px；
背景：绿色；
}

刷卡在这里有效
这里有一个非常棘手的解决方法：使用两个覆盖div，设置在播放器的右侧和左侧，允许用户播放和暂停，将高度设置为80%允许用户使用底部的菜单。这不是完美的，但有点效果

注1：如果您在这里播放它，它有点像马车，因此我添加了一个代码笔：

<div ng-app="app">
  <div ng-controller="ctrl" ng-swipe-right="msg($event, 'right')" ng-swipe-left="msg($event, 'left')">
    <div id="player"></div>
    <img id="player-cover" src="http://img.youtube.com/vi/M7lc1UVf-VE/hqdefault.jpg" />
  </div>
</div>

第二个版本，有点臃肿，但覆盖范围更广：

注2：我在div上使用了一个透明的背景来演示


var-app=angular.module（'app'，['ngTouch']）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.msg=函数（msg）{
警报（msg）；
}
});
。好的{
宽度：300px；
高度：100px；
背景：绿色；
}

刷卡在这里有效
问题在于您无法控制iframe中的事件，因此无法判断用户何时在该区域上滑动。我建议的解决方法是在不观看的情况下用图像占位符替换iframe。为了做到这一点，请使用以跟踪视频事件。当视频从播放转到暂停时，我们将隐藏视频并显示图像

HTML

<div ng-app="app">
  <div ng-controller="ctrl" ng-swipe-right="msg($event, 'right')" ng-swipe-left="msg($event, 'left')">
    <div id="player"></div>
    <img id="player-cover" src="http://img.youtube.com/vi/M7lc1UVf-VE/hqdefault.jpg" />
  </div>
</div>

这似乎是同一个问题——他们建议在开始时使用图像代替iframe。这是一个可行的解决方案吗？@jjbskir，嗯，我可以使用带有自定义播放按钮的图像，并将视频和单击时的图像替换为ng show，但如果用户暂停视频，他将无法再次滑动。另外，我不知道是否可以使用自定义按钮启动视频；）谢谢如果没有人发布更好的答案，我会接受这个。更新了一个更夸张的版本。