Question

美好的一天

我知道这个问题已经问过很多次了。我上下搜索了一下，以使其正常工作，但似乎有些变化，答案不再起作用。

在YouTube上，当我在控制台中运行此SimulationClick函数时。可以。

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementsByClassName("ytp-play-button")[0]; //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

那是因为有一个名为“ ytp-play-button”的按钮。

但是，当我将其带到YouTube电视（以前是倾斜式）时。这是行不通的。那里的div函数有一个“角色=按钮”。

这是负责播放按钮的div。

<div class="toggle-button selected material-icon-play-arrow toggle-selected transport-controls-toggle-button" tabindex="-1" role="button" style="">  <div class="background"></div>  <span class="label">Pause</span></div>

所以我将“ ytp-play-button”更改为““ material-icon-play-arrow””，尽管它使类正确。这是行不通的。

任何指针将不胜感激。谢谢。

P.S .：这是一个纯JavaScript问题，而不是jQuery问题。

编辑＃1：当我试图在控制台中运行像这样的onclick时

document.getElementsByClassName("material-icon-play-arrow")[0].onclick()

我收到此错误。

未捕获的TypeError：document.getElementsByClassName（...）[0] .onclick不是一个函数在：1：64 （匿名）@ VM7969：1

Answer 1

您可以使用YouTube Iframe Player API设置嵌入的YouTube视频，并控制与视频互动的方式。

对于您的特定情况，您需要通过单击HTML元素（在本例中为div元素）来播放/暂停YouTube视频。

要实现此功能，您可以使用以下代码-请参阅此jsfiddle中的工作示例。

基本上，我有一个div元素（称为playButton）和（使用onPlayerStateChange函数），我将click事件设置为如下：

在播放视频时，div playButton的文本为“暂停”，并且其点击事件允许暂停视频。
视频暂停时，div playButton的文本为“播放”，并且其点击事件允许播放视频。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Variables of the divs (where the YouTube iframe will load):
var player;

function onYouTubeIframeAPIReady() {

  // Div player:
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

  // After loading the iframe, set the "playVideo" onclick event on "playButton" anchor element.
  document.getElementById('playButton').onclick = function() {
    player.playVideo();
  };

}

// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {

  // If the video is PLAYING, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will be paused.
  if (event.data == YT.PlayerState.PLAYING) {
    document.getElementById('playButton').innerHTML = 'Pause';

    // Set the onclick event to the button for pause the YouTube video.
    document.getElementById('playButton').onclick = function() {
      player.pauseVideo();
    };
  }

  // If the video is PAUSED, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will resume the video = continue playing the video.
  if (event.data == YT.PlayerState.PAUSED) {
    document.getElementById('playButton').innerHTML = 'Play';
    document.getElementById('playButton').onclick = function() {
      player.playVideo();
    };
  }
}

// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

<!-- In this div, the YouTube video will be loaded with YouTube iframe Player API. -->
<div id="player"></div>

<!-- N.B this is the div element used for play or pause the current video loaded with YouTube iframe Player API. -->
<a href="#" id="playButton">Play</a>

这是官方文档中的“ Playback controls and player settings”，以获取更多详细信息。

使用“ role = button”模拟对div元素的点击-JavaScript

1 个答案: