我正在尝试使用图片和YouTube视频制作滑块.我想让它在触摸设备上工作正常,所以我想使用ng-swipe- *从角度的ngTouch模块.不幸的是,滑动在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开发者控制台中运行并在触摸设备上模拟)
解决方法
这是一个非常奇怪的解决方法：使用两个叠加层,设置在播放器的右侧和左侧允许用户播放和暂停,并将高度设置为80％允许他们使用底部的菜单.这不完美,但它的作品！
注1：如果你在这里玩,那就是一个bug,所以我加了一个codepen：http://codepen.io/anon/pen/LGjwYZ
第二版,有点blo肿,但面积更大：http://codepen.io/anon/pen/rxzXxB
注2：为了示范目的,我在div上使用透明背景.
var app = angular.module('app',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.3);height:80%;width:40%;left:0;position:absolute;z-index:20;"></div>
<div style="background:rgba(0,0.3);height:80%;width:40%;right:0;position:absolute;z-index:20;"></div>
</div>
</div>
</div>