在iPhone上，Vimeo Javascript API .play（）函数在video播放之前不起作用

我正在使用SwipeView（ http://cubiq.org/swipeview ）在触摸屏设备上创build可滑动的幻灯片。 这对图像来说很简单，但我想在幻灯片中包含一个Vimeovideo。 不幸的是，因为iFrame自己捕获你的滑动input（我相信这是至less发生了什么），一旦你已经到达video播放器幻灯片，你不能再从它滑动，除非你点击分页。 这是不可接受的。

我的解决scheme是隐藏在页面上的某个地方（使用display：none;或者height：0;或者任何其他地方）的video，然后在幻灯片中使用触发video播放的点击事件中的图像。 即使video是隐藏的，播放时也应该全屏播放（至less在iPhone上播放）。

当我在我的桌面浏览器上testing时，这种技术工作的很好，但是在iPhone上performance很奇怪。 出于testing目的，video正在幻灯片下显示。 如果我加载页面并点击幻灯片，它什么都不做。 但是，如果我通过点击实际的video播放器播放video，一旦videoclosures，我可以通过点击幻灯片再次播放video。 基本上，一旦通过播放器播放video，我可以通过API播放video，但不是没有先使用播放器。

这是我的代码： 

// Append the "hidden" video player to the page $('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"); // Get the player object var iframe = $('#slideshow-player')[0], player = $f(iframe); // When the video is ready player.addEvent('ready', function() { // Add the click event to the slide $('#play-video').on('click', function() { // Play the video player.api('play'); // Don't jump the page return false; }); });

我已经通过testing确定player.ready事件工作正常，并且图像的click事件正常工作。 问题似乎完全在于player.api('play')调用。 任何帮助，或完成这个替代方法将不胜感激。

在进一步调查之后，又发现了另外两个StackOverflow问题（ 具有js API和iPhones的 video播放器 以及具有js API和iPhone的 video播放器 ），以及Vimeo的官方API操作系统也出现这种情况，似乎要么是devise的function，要么是API的错误。

理论上：苹果不允许您在移动Safari中自动播放video。 也许这个限制是为了防止你使用API​​来自动播放带有Javascript的video而被强加给苹果的。

Safari远程控制台将显示控制台上的错误 – Error: The viewer must initiate playback first.

如果您在播放video之前查看video，video将无法启动（仅限iOS;其他平台似乎没问题）。 

 player.addEvent('ready', function() { player.api("seekTo", 10); });

所以你需要做一些事情： 

 if ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) { player.addEvent('play', function(id) { player.api("seekTo", 10); }); } else { player.api("seekTo", 10); }

有些浏览器一开始就禁止通过js触发“播放”。 必须有真正的用户交互才能播放video。

不过，如果你想把VIMOvideo放在滑块里，你可以做的是：

  1. 通过video顶部的“播放button”应用图片
  2. 设置“不透明度：0”的iframe，使其正确的大小和“播放button”的位置（iframe必须是“allowfullscreen”）
  3. 一旦用户第一次触发video播放。 使iframe正常大小，让vimeo player.js控制。

在这种情况下，用户必须点击“播放button”来触发video

Interesting Posts