Question

当用户点击ytp-large-play-button类的svg或嵌入YouTube视频时，我想自动播放全屏视频。我怎么能在jquery中这样做？我不想点击全屏＆＃39;。对不起我的英文。

Answer 1

浏览器设计人员，如谷歌，Mozilla等，在安全方面变得越来越偏执，这是有道理的;然而，它迫使我参与创造性的编程，以使他们的工作方式发挥作用。

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

YouTube嵌入（在技术上它是iframe而不是embed标记）不支持跨源。意思是我不能，禁止黑客攻击你的网页浏览器，在他们的iFrame中创建一个点击事件。
必须由受信任事件触发全屏。必须由用户启动受信任的事件，例如click。

我们可以通过创建一个完全透明且位于播放器（#wrapper）顶部的重叠div（iframe#ytplayer）来解决这两个限制。我们可以在重叠的div上侦听click事件，然后从（可信的）click事件请求全屏。我们还可以使用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)();
    }
  });
}

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

1 个答案: