javascript - 带有 youtube iframe 的 Angular ng-swipe

Question

我正在尝试使用图像和 YouTube 视频构建简单的 slider 。我想让它在触摸设备上正常工作，所以我想使用 Angular 的 ngTouch 模块中的 ng-swipe-* 。不幸的是，滑动不适用于 youtube 的 iframe。我尝试设置较低的 z-index: -10;，但我无法播放视频。

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

有一个片段:

var app = angular.module('app', ['ngTouch']);

app.controller('ctrl', function($scope) {
  $scope.msg = function(msg) {
    alert(msg);
  }
});

.ok {
  width: 300px;
  height: 100px;
  background: green;
}

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl" ng-swipe-right="msg('right')" ng-swipe-left="msg('left')">
    <div class="ok">swipe works here</div>
    <div>
      <iframe width="300" height="200" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

(最好的测试方法是在 Chrome 开发者控制台中运行它并在触摸设备上模拟)

Answer 1

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

注意 1:如果你在这里玩它有点 bug，所以我添加了一个代码笔: http://codepen.io/anon/pen/LGjwYZ

第二个版本，有点臃肿但覆盖的区域更多:http://codepen.io/anon/pen/rxzXxB

注意 2:出于演示目的，我在 div 上使用了透明背景。

var app = angular.module('app', ['ngTouch']);

app.controller('ctrl', function($scope) {
  $scope.msg = function(msg) {
    alert(msg);
  }
});

.ok {
  width: 300px;
  height: 100px;
  background: green;
}

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl" ng-swipe-right="msg('right')" ng-swipe-left="msg('left')">
    <div class="ok">swipe works here</div>
    <div style="position:relative; height:200px; width:300px;">
        <iframe style="position:absolute;width:100%;height:100%;z-index:10;" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
        <div style="background:rgba(0,0,0,0.3);height:80%;width:40%;left:0;position:absolute;z-index:20;"></div>
      <div style="background:rgba(0,0,0,0.3);height:80%;width:40%;right:0;position:absolute;z-index:20;"></div>
</div>
  </div>
</div>