Question

我正在使用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')电话中。任何帮助，或实现这一目标的替代方法将不胜感激。

Answer 1

在进一步调查此问题并找到另外两个具有相同问题（video players with js API and iPhones和video players with js API and iPhones）的StackOverflow问题以及在Vimeo的官方API操场上发生此相同行为的事实后，似乎要么它既可以是设计功能，也可以是API的错误。

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

Answer 2

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

Answer 3

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

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

在视频顶部应用带“播放按钮”的图片
将“opacity：0”设置为iframe并使其完全符合“播放按钮”的大小和位置（iframe必须为“allowfullscreen”）
一旦用户第一次触发视频播放。将iframe设置为您想要的正常大小，让vimeo player.js控制。

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

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

3 个答案: