Question

我正在使用JS API加载YouTube视频。我可以使用外部控件播放，暂停和全屏，但双击视频我无法退出全屏。

使用以下代码试试这个：

使用按钮加载视频
使用内部iframe按钮全屏显示
双击视频（您将退出全屏）

现在我的问题：

使用按钮加载视频
使用外部按钮全屏显示
双击视频（除非您按ESC键，否则没有任何反应）

我该怎么做？我需要双击退出全屏（除了使用ESC键）

HTML

<button id="btn_load">load video</button>
<button id="btn_play">play</button>
<button id="btn_pause">pause</button>
<button id="btn_fullscreen">fullscreen</button>

<div id="video_player">
  <div id="video"></div>
</div>

JS

const YOUTUBE_LINK = "https://www.youtube.com/embed/#VIDEO?wmode=transparent&autoplay=1&rel=0&controls=1&enablejsapi=1&html5=1";
const YOUTUBE_VIDEO_ID = "mPyLF7NxZyY";

var player;

function onYouTubePlayerAPIReady() {

  player = new YT.Player('video', {
    height: '480',
    width: '720',
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {

  $("#btn_play").click(function() {
    player.playVideo();
  });

  $("#btn_pause").click(function() {
    player.pauseVideo();
  });

  $("#btn_fullscreen").click(function() {
    var iframe = $('#video')[0];

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
    if (requestFullScreen) {
      requestFullScreen.bind(video)();
    }
  });


}

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



$(document).ready(function() {
  $("#btn_load").click(function() {
    var video_src = YOUTUBE_LINK.replace("#VIDEO", YOUTUBE_VIDEO_ID);
    $("#video_player iframe").attr("src", video_src);
  });

});

退出YouTube全屏视频

0 个答案: