带有自定义 YouTube 控件的 jQuery Mobile 弹出窗口答案

【问题标题】：jQuery Mobile Popup with custom YouTube Controls带有自定义 YouTube 控件的 jQuery Mobile 弹出窗口
【发布时间】：2016-12-24 06:47:57
【问题描述】：

我想创建一个嵌入 YouTube 视频并允许自定义控件的 jQuery Mobile 弹出窗口（或任何类型的 javascript 模式）。

这是一个JSFiddle demo，带有一个基本的“播放”按钮，希望能帮助说明我的问题。

基本上，我有 HTML 中的 iframe 代码：

<iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen></iframe>

然后，当加载视频时，我会这样做：

$(document).on("pagecreate", function() {
  // bind click events
  $(document).on('click', '#play', function() {
    playVideo();
    return false;
  });

  $(".ui-popup iframe")
    .attr("width", 0)
    .attr("height", "auto");
  $("#popupVideo").on({
    popupbeforeposition: function() {
      initYoutubePlayer();

      // call our custom function scale() to get the width and height
      var size = scale(497, 298, 15, 1),
        w = size.width,
        h = size.height;
      $("#popupVideo iframe")
        .attr("width", w)
        .attr("height", h);
    },
    popupafterclose: function() {
      $("#popupVideo").html("<span></span>");
      $("#popupVideo iframe")
        .attr("width", 0)
        .attr("height", 0);
    },
  });
});

function initYoutubePlayer() {
  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 player;

  function onYouTubeIframeAPIReady() {
    alert('onYouTubeIframeAPIReady');
    player = new YT.Player('iframe-video', {
      events: {
        'onReady': onPlayerReady,
      }
    });
  };

  function onPlayerReady(event) {
    alert('ready');
  };

  alert('initialized');
}

function playVideo() {
  alert('playVideo...');
  //player.playVideo();
}

加载视频工作正常，但我无法让 YouTube iFrame API 在我可以实例化 YT.Player 的地方工作。换句话说，“onYouTubeIframeAPIReady”不会触发。

我已经尝试了这个 JSFiddle 代码的各种排列，但感觉我可能遗漏了一些明显的东西。

是否可以在 jQuery Mobile 弹出窗口或 javascript 模态中拥有自定义 YouTube 控件？

【问题讨论】：

标签： javascript jquery jquery-mobile youtube-api youtube-iframe-api

【解决方案1】：

SEE FIDDLE

<!DOCTYPE html>
<title>JQM latest</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css" />


<body>
  <div data-role="page" id="index">
    <a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a>
    <div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
      <a href="#" id="play" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Play</a>
      <br>
      <div id="player"></div>
      <!-- <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe> -->
    </div>
  </div>
</body>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'a0gact_tf_0',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {}

  function stopVideo() {
    player.stopVideo();
  }

  $(document).on('click', '#play', function() {
    player.playVideo();
  });
</script>

</html>

【讨论】：

哇，真快。谢谢！
@kanso 很高兴它有帮助。小提琴将完美地工作。但是由于某种原因，sn-p 在 SO 中无法正常运行。