jQuery移动弹出与自定义YouTube控件

jQuery Mobile Popup with custom YouTube Controls

本文关键字：自定义 YouTube 控件 移动 jQuery      更新时间：2023-09-26

我想创建一个jQuery移动弹出(或任何类型的javascript模态)嵌入一个YouTube视频，并允许自定义控件。

这是一个JSFiddle演示，有一个基本的"播放"按钮，希望能帮助解决我的问题。

基本上，我在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移动弹出窗口或javascript模式中自定义YouTube控件?

参见 

<!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>

相关文章：