javascript - 如何创建全屏 youtube 嵌入视频点击 youtube 的 ytp-large-play-button 类？

Question

我想在用户单击 ytp-large-play-button 类的 svg 或嵌入的 youtube 视频时自动播放全屏视频。我怎么能在 jquery 中做到这一点？我不想点击“全屏”。对不起我的英语。

Answer 1

Google、Mozilla 等浏览器设计者在安全方面变得越来越偏执，这是有道理的；然而，它迫使我参与创造性的编程，让事情按应有的方式运作。

您忽略了两个主要的安全问题:

1. YouTube 嵌入(技术上它是 iframe 而不是 embed 标签)不支持跨源。这意味着我不能在他们的 iFrame 中创建点击事件，除非黑掉你的网络浏览器。
2. 全屏必须由可信 事件触发。受信任的事件必须由用户发起，例如 click。

我们可以通过创建一个完全透明并位于播放器 (iframe#ytplayer) 之上的重叠 div (#wrapper) 来绕过这两个限制.我们可以在重叠的 div 上监听点击事件，然后从(可信的)点击事件请求全屏。我们还可以使用 YouTube 的 API 播放视频。

工作代码笔:https://codepen.io/anon/pen/dmGgmx

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.youtube.com/player_api"></script>
<div class="container">
  <div id="wrapper"></div>
  <div id="ytplayer"></div>
</div>

CSS

.container {
  position:relative;
  overflow:hidden;
  display:inline-block;
}

#wrapper {
  z-index:1;
  cursor:pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

JavaScript:

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onReady
    }
  });
}

function onReady() {
  $("#wrapper").click(function () {
    var iframe = $("#ytplayer")[0];
    player.playVideo();
    $(this).remove();
    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
    if (requestFullScreen) {
      requestFullScreen.bind(iframe)();
    }
  });
}