移动版 Google Chrome 中的 Vimeo SDK 问题答案

【问题标题】：Issues with Vimeo SDK in Google Chrome on mobile移动版 Google Chrome 中的 Vimeo SDK 问题
【发布时间】：2019-08-12 18:41:25
【问题描述】：

播放或暂停嵌入的 Vimeo 视频后，我正在尝试更改 div 上的 ID。我按照这个codepen开始。 https://codepen.io/filipbech/pen/Aybku 一切正常。适用于多种浏览器和 chrome 开发人员。我推送我的更改并在我的 Iphone 上进行测试。突然间，我的代码可以在除 Chrome 之外的所有移动浏览器上运行。

看起来，问题出在 message.event 上，但由于它适用于桌面和所有其他移动浏览器，我无法弄清楚发生了什么。以下是我在 codepen 链接中稍作修改的代码。

<script>
/* this version uses jquery, just to have easier clickhandlers and stuff - nothing that talks to vimeo is dependant on jQuery... */

var t;

/* Helper function to send a message to Vimeo-iframe */
function vimeoPost(action, value, target) {
    var data = { method: action };
    if (value) {
        data.value = value;
    }
    target.contentWindow.postMessage(JSON.stringify(data), '*');
};

/* When a message is received, deal with it */
window.addEventListener('message', function(event) {
  /* Get message and sender from the event */
  var message = JSON.parse(event.data);
  var sender = document.getElementById(message.player_id);

  /* If the message.event is "ready", then send a message to add eventlisteners for play and pause also */
  if(message.event == "ready") {
    vimeoPost('addEventListener','play',sender);
    vimeoPost('addEventListener','pause',sender);
  }

  /* Because of the above, we will start receiving events when video is played or paused - we will toggle a class, just to show it visually */ 
  if(message.event == 'play') {
    $('.vid').attr("id", "none");
    $('.item').attr("id", "dead");
    node = sender
    pE = node.parentElement
    parentElement = pE.parentElement
    parentElement.setAttribute("id","active");
    $('#tail').css('visibility', 'visible');
    t = setTimeout(function() {
        parentElement.setAttribute("id","none");
        $('#tail').css('visibility', 'hidden');
    }, 3000);
  }
  if(message.event == 'pause') {
    clearTimeout(t); 
    sender.classList.remove('playing');
    sender.classList.add('paused');
    $('.item').attr("id", "dead");
    node = sender
    pE = node.parentElement
    parentElement = pE.parentElement
    parentElement.setAttribute("id","active");
        $('#tail').css('visibility', 'visible');
  }

}, false);

我希望这能正常工作，但我不知道我需要解决什么问题。它目前位于 zakicks.com/mobile.html，但无论您是否使用手机，它都会重定向到移动网站。到目前为止，它适用于 Safari 和 Firefox 的移动设备。

【问题讨论】：

经过进一步测试，我在移动版 Chrome 中发现了上述 codepen 示例半功能。如果单击 iframe 中的播放按钮，则不会添加或删除该类，这意味着 message.event 函数无法通过 iframe 工作。但是，如果您单击 iframe 外部的播放和暂停按钮，message.event 将按预期工作并成功添加或删除类。是什么赋予了？奇怪的是，这适用于所有其他浏览器。我想避免使用按钮，有人有什么想法吗？

标签： javascript jquery html

【解决方案1】：

虽然我无法弄清楚为什么这段代码在 Chrome 移动版上出现问题，但我确实找到了解决方法 - Vimeo API not detecting play event

var vPlayer1 = document.getElementById("video1");
var player1 = new Vimeo.Player(vPlayer1)

var vPlayer2 = document.getElementById("video2");
var player2 = new Vimeo.Player(vPlayer2)

player1.on('play', function() {
    console.log('played the 1 video!');
    vPlayer1.style.border = '10px solid red';
});
player2.on('play', function() {
    console.log('played the 2 video!');
    vPlayer2.style.border = '10px solid red';
});

player1.on('pause', function() {
    console.log('paused the 1 video!');
    vPlayer1.style.border = '10px solid blue';
});
player2.on('pause', function() {
    console.log('paused the 2 video!');
    vPlayer2.style.border = '10px solid blue';
});

不幸的是，这意味着对每个播放器进行硬编码，而不是让消息处理所有现有播放器。

【讨论】：