7

我正在使用 SwipeView ( http://cubiq.org/swipeview ) 在触摸屏设备上创建可滑动的幻灯片。这对图像来说很简单，但我也想在幻灯片中包含一个 Vimeo 视频。不幸的是，因为 iFrame 会为自己捕获您的滑动输入（我相信至少正在发生这种情况），一旦您到达视频播放器幻灯片，除非您点击分页，否则您将无法再从它滑开。这是不可接受的。

我的解决方案是将视频隐藏在页面上的某处（使用 display: none; 或 height: 0; 或任何有效的方法），并在幻灯片中使用带有触发视频播放的点击事件的图像。即使视频被隐藏，当它播放时，它也应该全屏播放（至少在 iPhone 上）。

当我在我的桌面浏览器上测试它时，这项技术运行良好，但它在 iPhone 上的表现很奇怪。出于测试目的，视频显示在幻灯片下方。如果我加载页面并点击幻灯片，它什么也不做。但是，如果我通过点击实际的视频播放器来播放视频，一旦视频关闭，我可以通过点击幻灯片再次播放视频。基本上，一旦通过播放器播放视频，我就可以通过 API 播放视频，但必须先使用播放器一次。

这是我的代码：

// 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;
    });
});

我通过测试确定 player.ready 事件工作正常，图片的点击事件工作正常。问题似乎完全在于player.api('play')通话。任何帮助或实现此目的的替代方法将不胜感激。

4

3 回答 3

9

在进一步调查并发现其他两个具有相同问题的 StackOverflow 问题（具有 js API 和 iPhone的视频播放器以及具有 js API 和 iPhone 的视频播放器）以及在 Vimeo 的官方 API 操场上发生同样行为的事实之后，似乎它要么是设计的功能，要么是 API 的错误。

理论化：Apple 不允许您在移动 Safari 中自动播放视频。也许这个限制是强加给 Apple 的，以防止您使用 API 来使用 Javascript 自动播放视频。

于 2013-12-10T15:19:07.780 回答
1

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

如果您在播放之前搜索视频，视频将无法启动（仅限 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);
}
于 2015-06-15T03:47:30.780 回答
0

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

但是，如果您想将 vimeo 视频放在滑块中，您可以做的是：

  1. 在视频顶部应用带有“播放按钮”的图像
  2. 将“不透明度：0”设置为 iframe，并使其与“播放按钮”的大小和位置完全相同（iframe 必须为“allowfullscreen”）
  3. 一旦用户第一次触发视频播放。将 iframe 设置为您想要的正常大小并让 vimeo player.js 控制。

在这种情况下，用户必须点击“播放按钮”来触发视频

于 2017-06-08T07:54:13.610 回答