我无法自动播放 vimeo 视频（移动设备）答案

【问题标题】：I can't autoplay vimeo video (mobile)我无法自动播放 vimeo 视频（移动设备）
【发布时间】：2014-01-03 23:42:49
【问题描述】：

我正在尝试在移动设备上自动播放iframe 中包含的视频。

应用运行良好，但用户必须点击 iFrame 内的按钮才能播放视频。

我已经尝试在iframe 中使用"autoplay=1" 参数，但它在移动设备上不起作用（在桌面上很好）。

你能帮帮我吗？

【问题讨论】：

这是移动设备上的功能，以保留用户带宽：Autoplay on most mobile platforms (Android, iOS) gets blocked to avoid poor user experiences - video should only play following a user action. You can usually work around it by triggering the play() on another event (eg the onloaded event)
@A.Wolff ：谢谢，但我必须启动它。 play() 有解决方法，但这仅适用于我认为的 HTML5
vimeo API 不公开一个 play() 方法吗？我想您应该能够找到解决方法，但不幸的是，我无法在此方面为您提供更多帮助

标签： jquery html dom vimeo

【解决方案1】：

这是我的实现！我使用了来自Plyr.io的一个名为 plyr 的库

HTML

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/videoID?loop=true&amp;autoplay=1&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Javascript

document.addEventListener("DOMContentLoaded", function() {
  const player = new Plyr('#player', {
  autoplay: true,
  controls: false,
  loop: {active: true},
  clickToPlay: false,
    muted: true
});
  document.querySelector('[data-play]').addEventListener('click', () => {
        player.play();                                               
});

  setTimeout(() => {
             document.querySelector('[data-play]').click();
  console.log("play");
             }, 2000)
});

它允许在浏览器上自动播放 Vimeo 视频。它也适用于 youtube 不要忘记为 plyr 库包含 javascript 和 css 文件。

【讨论】：

【解决方案2】：

https://vimeo.com/help/faq/mobile/mobile-videos#why-cant-i-loop-or-autoplay-my-videos-on-mobile-devices

上面的链接明确指出 Vimeo 不支持移动自动播放功能。尝试使用 YouTube 或 BrightCove，我相信他们会这样做。

【讨论】：

用 vimeo 播放视频不是一种选择，而是一种约束

【解决方案3】：

我在 iOS 11 上试用了 Vimeo iframe 播放器，自动播放参数运行良好。唯一的问题是内联播放视频。这似乎不可能（至少我做不到）。

我也在 android（SDK 19 - Android 4.4 及更高版本）上进行了尝试。自动播放参数对我来说在这里不起作用，但我可以用很少的解决方法自动播放视频：

player.loadVideo(videoId).then(function(id)
{
    player.play()
    player.pause()
    setTimeout(function() { player.play() }, 750)
})

播放器必须用随机视频初始化，例如：

player = new Vimeo.Player('player', {
    id: 59777392,
    //autoplay: 1 // only for iOS, it is not necessary on Android
})

在player.ready() 方法被触发后，您可以像上面显示的那样调用loadVideo(videoId)。

【讨论】：

【解决方案4】：

正如@A.Wolff 所说，autoplay 在设计上被禁用以保留带宽。

例如，有可能“欺骗”iOS 以为用户点击了播放按钮（如果您想知道如何点击，请在 Google 上搜索）。

但是，Vimeo 必须实现这一点，因为您将无法从外部源操作 iframe 的内容。

结论：您不能在移动设备上自动播放嵌入的 Vimeo 视频。

（出于好奇，我通过 Safari 中的远程调试对嵌入播放器的源代码进行了一些挖掘，但无法找到一种方法来让视频在不点击播放按钮的情况下播放）

【讨论】：

这个结论不再成立。您可以在移动设备上自动播放嵌入的 Vimeo 视频。需要注意的是，视频必须静音才能正常工作，例如<iframe src="https://player.vimeo.com/video/{videoId}?autoplay=1&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen;" allowfullscreen></iframe>。要记住的另一个警告是，如果启用了低功耗模式，自动播放将永远不会在 iOS 上的 Safari 或 Chrome 中工作。我没有在 Android 上测试过低功耗模式场景。