控制 Vimeo 缩略图关闭和视频开始的时间

Question

我正在查看 vimeo 嵌入 api。我希望视频在我正在工作的负载上自动播放，但目前发生的事情是这样的：

播放器加载然后自动播放[事件"ready"]
缩略图已删除并显示黑色约一秒钟
视频开始播放 [事件 "playProgess"]

问题出在第二步。我正在尝试消除缩略图隐藏（开始播放时）到视频实际出现并开始播放之间的黑屏。

我认为可以解决的方法是保留缩略图并在第一个时触发缩略图隐藏 "playProgress" 但我似乎无法控制缩略图何时打开或关闭.

这个可以控制吗？我知道我可以拉出缩略图并将其覆盖在 iframe 上，但我希望有一个更清晰的修复（将其全部包含在 iframe 中）。

这是一支 api 运行的钢笔： http://codepen.io/mattcoady/pen/KMzZMZ

$(function() {
    var player = $('iframe');
    var playerOrigin = '*';
    var status = $('.status');

    // Listen for messages from the player
    if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
    }
    else {
        window.attachEvent('onmessage', onMessageReceived, false);
    }

    // Handle messages received from the player
    function onMessageReceived(event) {
        // Handle messages from the vimeo player only
        if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
            return false;
        }

        if (playerOrigin === '*') {
            playerOrigin = event.origin;
        }

        var data = JSON.parse(event.data);

        console.log(data.event);

        switch (data.event) {
            case 'ready':
                onReady();
                break;

            case 'playProgress':
                onPlayProgress(data.data);
                break;

            case 'pause':
                onPause();
                break;

            case 'finish':
                onFinish();
                break;
            case 'play':
              onPlay();
              break;
        }
    }

    // Call the API when a button is pressed
    $('button').on('click', function() {
        post($(this).text().toLowerCase());
    });

    // Helper function for sending a message to the player
    function post(action, value) {
        var data = {
          method: action
        };

        if (value) {
            data.value = value;
        }

        var message = JSON.stringify(data);
        player[0].contentWindow.postMessage(message, playerOrigin);
    }

    function onReady() {
        status.text('ready');

        post('play');

        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
        post('addEventListener', 'playProgress');
    }

    function onPause() {
        status.text('paused');
    }

    function onFinish() {
        status.text('finished');
    }

    function onPlay(){
      alert('play')
    }

    function onPlayProgress(data) {
        status.text(data.seconds + 's played');
    }
});

Answer 1

我最终采用了我的 hacky 修复程序。它会拉出缩略图并将其放在视频上。当我的脚本检测到 'playProgress' 事件时，这意味着视频正在播放。我使用 jQuery 淡化缩略图封面。

http://codepen.io/mattcoady/pen/YWqaWJ

$(function() {
  var player = $('iframe');
  var playerOrigin = '*';
  var videoId = 76979871;

  player.attr('src', 'https://player.vimeo.com/video/' + videoId + '?api=1&player_id=player1&background=1&autoplay=1&loop=1');

  // Listen for messages from the player
  if (window.addEventListener) {
    window.addEventListener('message', onMessageReceived, false);
  } else {
    window.attachEvent('onmessage', onMessageReceived, false);
  }

  $.getJSON('http://vimeo.com/api/v2/video/' + videoId + '.json', {jsonp: 'callback',dataType: 'jsonp'}, function(data) {
    var thumbnail = document.createElement('img');
    thumbnail.src = data[0].thumbnail_large;
    thumbnail.style.width = document.querySelector('#player1').offsetWidth  + 'px';
    thumbnail.style.height = document.querySelector('#player1').offsetHeight + 'px';
    document.querySelector('#vimeo-thumb-container').appendChild(thumbnail);
  })

  // Handle messages received from the player
  function onMessageReceived(event) {
    // Handle messages from the vimeo player only
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {return false;}
    if (playerOrigin === '*') { playerOrigin = event.origin; }

    var data = JSON.parse(event.data);

    switch (data.event) {
      case 'ready':
        onReady();
        break;

      case 'playProgress':
        onPlayProgress(data.data);
        break;
    }
  }

  // Helper function for sending a message to the player
  function post(action, value) {
    var data = { method: action };
    if (value) {data.value = value;}
    var message = JSON.stringify(data);
    player[0].contentWindow.postMessage(message, playerOrigin);
  }

  function onReady() {
    post('play');
    post('addEventListener', 'playProgress');
  }

  function onPlayProgress(data) {
    $('#vimeo-thumb-container').fadeOut(250);
  }

});

控制 Vimeo 缩略图关闭和视频开始的时间

Controlling when Vimeo thumbnail turns off and video begins

javascript

jquery

vimeo

vimeo-api

vimeo-player