时间戳

首页 > 解决方案 > 移动版 Google Chrome 中的 Vimeo SDK 问题

javascript - 移动版 Google Chrome 中的 Vimeo SDK 问题

问题描述

一旦播放或暂停嵌入的 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 的移动设备。

标签： javascriptjqueryhtml

解决方案

虽然我不知道为什么这段代码在 Chrome Mobile 上崩溃了，但我确实找到了一种解决方法 - Vimeo API 未检测到播放事件

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

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

推荐阅读