在iPhone上，Vimeo Javascript API.play(）函数没有'播放完视频后才能工作

On iPhone, Vimeo Javascript API .play() function doesn't work until the video has been played

本文关键字：播放 视频 工作 Vimeo iPhone Javascript API 函数 play      更新时间：2024-06-09

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

我的解决方案是将视频隐藏在页面上的某个位置（使用显示：无；或高度：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')调用。任何帮助或实现这一点的替代方法都将不胜感激。

在进一步调查并发现另外两个StackOverflow问题与相同的问题（使用js API和iPhone的视频播放器以及使用js API和iPhone的电视播放器）以及在Vimeo的API官方游乐场上发生相同行为的事实后，似乎要么是设计的功能，要么是API的缺陷。

理论化：苹果不允许你在移动Safari中自动播放视频。也许这一限制是强加在苹果的一端，以防止你使用API自动播放带有Javascript的视频。

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

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

然而，如果你想把vimeo视频放在滑块中，你可以做的是：

  1. 在视频顶部应用带有"播放按钮"的图像
  2. 将"opacity:0"设置为iframe，并使其大小恰好为&"播放按钮"的位置（iframe必须为"allowfullscreen"）
  3. 一旦用户第一次触发视频播放。将iframe设置为您想要的正常大小，并让vimeo player.js控制

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

相关文章：