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

我使用SwipeView（http://cubiq.org/swipeview）在触摸屏设备上创建可滑动的幻灯片。这对图像来说很简单，但我希望在幻灯片中包含Vimeo视频。不幸的是，因为iFrame捕获自己的滑动输入（我相信至少这是发生了什么），一旦你到达视频播放器幻灯片，你不能再从它滑动，除非你点击分页。这是不可接受的。在iPhone上，Vimeo Javascript API .play（）函数在视频播放前不起作用

我的解决方案是隐藏视频中某个地方的视频（使用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事件是否正常工作，并在图像的click事件工作正常确定。问题似乎完全在于拨打player.api('play')。任何帮助，或完成此替代方法将不胜感激。

来源

2013-12-09 Ryan Giglio

调查这进一步，并寻找具有相同的问题（video players with js API and iPhones和video players with js API and iPhones）其他两个StackOverflow的问题，以及为在Vimeo的官方API游乐场发生此相同的行为的事实后，似乎无论是它的可能是设计或功能API的错误。

理论：Apple不允许您在移动版Safari中自动播放视频。也许这个限制是为了防止你使用API来自动播放带有Javascript的视频而被强加给Apple的。（;其他平台似乎OK仅适用于iOS）如果你想寻找一个视频Error: The viewer must initiate playback first.

它的播放之前，视频将无法启动 -

来源

2013-12-10 15:19:07

没错，的iOS不允许录像。无论出于何种原因，通过我们的API，该交互在某个时候会丢失。 –

嘿@BradDougherty，我看到与Android和Chrome浏览器（4.4.2）中描述的内容完全相同的行为，这是一个已知问题吗？在iOS上没有解决这个问题呢？ – RwwL

想象一下，有一部电影上的网站，下载立即开始，因为您将其分配给自动播放。用户在海外，下个月他们的手机账单是25,000美元。 – 2016-03-25 16:05:26

Safari浏览器远程控制台会显示您的控制台上的错误。

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-15 03:47:30 frumbert

Vimeo的工作人员几天前更新了我，并提到他们已经关闭了这一个;似乎测试出来了。我上面的黑客不再需要。 – frumbert

有些浏览器禁止触发“玩”通过在开始的时候JS。必须有真正的用户互动来播放视频。

不过，如果你想要把VIMEO视频中的滑块，你可以做的是：

上的视频
一套“透明度之上应用的图像与“播放按钮”：0 “的内容框，并使其正确的大小&位置的”播放按钮“（iframe必须是”allowfullscreen“）
一旦用户第一次触发视频播放。使iframe达到您想要的正常大小，让vimeo player.js掌控。无需用户交互播放

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

来源

2017-06-08 07:54:13 jilykate

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

回答

相关问题