问使用iframe嵌入应用程序接口在同一页面上使用多个YouTube播放器
EN

Stack Overflow用户

提问于 2017-04-21 11:25:14

回答 1查看 391关注 0票数 0

多个按钮将能够附加到同一个页面，而这些页面又有自己的youtube ID。该按钮可以被点击，这将打开一个模式(弹出)内的youtube视频。我有一个单独的实例，如何让javascript代码处理多个按钮呢？

HTML (php)如下所示：

<button id="play-icon-<?php echo $bID; ?>" class="button" target="_blank">Watch our show reel</button>

<div class="remodal video-modal" data-remodal-id="video-modal-<?php echo $bID; ?>">
  <button data-remodal-action="close" class="modal-close"><span class="icon-close"></span></button>
  <div class="video-wrapper">
    <div id="player-container" class="screen"></div>
  </div>
  <span class="loader"></span>
</div>

然后我有了触发模态和控制视频的javascript代码：

$(function() {
  openModal('<?php echo $youtube_ID; ?>');
});


function openModal(video_id) {
  var playButton = $('#play-icon-<?php echo $bID; ?>');
  var modal = $('[data-remodal-id=video-modal-<?php echo $bID; ?>]');
  var settings = {
    hashTracking: false
  }
  var inst = modal.remodal(settings);
  var device = $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

  playButton.on('click', function(e) {

    if (device) {

      var yturl = '//www.youtube.com/embed/' + video_id + '?rel=0&showinfo=0&modestbranding=1&autoplay=1&controls=0';
      $('body').append('<span id="close-video-modal" class="icon-close"></span><iframe id="large-modal-banner-video" src="' + yturl + '"></iframe>');

    } else {

      inst.open();
      play_video(video_id);

    }

  });
}

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var modelPlayer;
var modelPlayerDefaults = {
  autoplay: 0,
  autohide: 1,
  modestbranding: 0,
  rel: 0,
  showinfo: 0,
  controls: 0,
  disablekb: 1,
  enablejsapi: 0,
  iv_load_policy: 3
};

function play_video(id) {
  modelPlayer = new YT.Player('player-container', {
    videoId: id.toString(),
    events: {
      'onReady': onModalPlayerReady,
      'onStateChange': onModelPlayerStateChange
    },
    playerVars: modelPlayerDefaults
  });
}

function onModelPlayerStateChange(e) {
  if (e.data === 1) {
    $('.loader').fadeOut();
    $('#player-container').addClass('active');
  } else if (e.data === 0) {
    var currentModal = $('#player-container.active').closest('.video-modal');
    var inst = currentModal.remodal();
    inst.close();
    $('#player-container').removeClass('active');
  } else {
    $('#player-container').removeClass('active');
    $('.loader').show();
  }
}

function onModalPlayerReady(e) {
  modelPlayer.playVideo();
}

$(document).on('closed', '.video-modal', function() {
  modelPlayer.destroy();
});

$(document).on('click tap', '#close-video-modal', function(e) {
  e.preventDefault();

  $('#close-video-modal, #large-modal-banner-video').fadeOut(function() {
    $(this).remove();
  });

});