时间戳

首页 > 解决方案 > 如果我检测到窗口模糊并暂停视频，VIMEO 嵌入播放器的行为会很奇怪

javascript - 如果我检测到窗口模糊并暂停视频，VIMEO 嵌入播放器的行为会很奇怪

问题描述

我嵌入了 vimeo 播放器，需要在窗口模糊时自动暂停。

我正在使用当前的 VIEMO SDK API ( https://player.vimeo.com/api/player.js )

所以我的代码如下

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
var myWindow = window;

player.on('play', function(data) {
  console.log("Playing...");
  myWindow.focus();
  myWindow.onblur = function() {
    player.pause();
    console.log("You gone...");
  };
});

当用户单击活动窗口时，这可以完美地工作（例如：更改浏览器选项卡，或者浏览器失去焦点）

但最大的问题是开始播放视频后。当用户单击嵌入播放器内的“暂停”按钮（或单击任何想要暂停的地方）时。视频不会“暂停，它似乎会暂停很短的一段时间，然后再继续播放！经过多次尝试，我仍然无法解决这个问题。

我试图为 pause 命令设置一个小的延迟：

setTimeout(function(){ player.pause();}, 300);

这有点帮助，但有时视频仍会继续播放。

而且我还尝试制作一个外部的“暂停”按钮，然后这个“按钮”会正常运行，它可以真正暂停播放视频而没有任何问题。但是我真的不想放一个外部按钮来暂停视频，这会使界面变得丑陋。

我制作了一个 codepen 页面来重现此问题，如下所示 https://codepen.io/kit-leong/pen/PoZWZEj

有人能给我一些关于这些的想法吗？谢谢

标签： javascriptvimeovimeo-player

解决方案

推荐阅读