Question

我正在尝试使用图片和youtube视频构建简单的滑块。我想让它在触摸设备上正常工作，所以我想使用angular 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开发者控制台中运行它并在触摸设备上模拟）

Answer 1

这里有一个非常糟糕的解决方法：使用两个叠加div，设置在播放器的右侧和左侧允许用户播放和暂停，并将高度设置为80％允许他们使用底部的菜单。这不是完美的，但它有点有效！

注意1：如果你在这里播放它会有一些错误，所以我添加了一个codepen： {{3 }}

第二个版本，有点臃肿但面积覆盖范围更广：http://codepen.io/anon/pen/LGjwYZ

注意2：我在div上使用透明背景进行演示。

＆＃13;

var app = angular.module('app', ['ngTouch']);

app.controller('ctrl', function($scope) {
  $scope.msg = function(msg) {
    alert(msg);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

问题在于您无法控制iframe中的事件，因此无法判断用户何时滑过该区域。我建议的工作是在不看的情况下用图像占位符替换iframe。为此，请使用YouTube's Iframe API来跟踪视频事件。当视频从播放到暂停时，我们将隐藏视频并显示图像。 Here is a demo

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>

<强> JS

在启动时，它会隐藏视频。当点击图像时，它会显示并播放视频。当视频从暂停状态转到播放onPlayerStateChange处理切换图像和视频时。每次在图像上调用滑动事件时，它还会触发图像的单击事件处理程序。变量swiping会跟踪事件是单击还是滑动。

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

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

// keep track of the user swiping. onYouTubeIframeAPIReady needs to occur outside of Angular. 
var swiping = false;

// Youtube related. 
document.getElementById('player').style.display = 'none';
document.getElementById('player-cover').addEventListener("click", function() {
    if (swiping) {
        swiping = false;
        return;
    }
    document.getElementById('player').style.display = 'block';
    player.playVideo();
});

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: { 'onStateChange': onPlayerStateChange }
    });
}

function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
        document.getElementById('player-cover').style.display = 'block';
        document.getElementById('player').style.display = 'none';
    } else {
        document.getElementById('player-cover').style.display = 'none';
        document.getElementById('player').display = 'block';
    }
}

使用youtube iframe进行Angular ng-swipe

2 个答案: