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

Question

早安，

我知道这个问题已经被问过很多次了。我到处搜索以使其正常工作，但似乎有些事情发生了变化，答案不再起作用。

在 YouTube 上，当我在控制台中运行此模拟点击函数时。它有效。

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 TV（以前的leanback）时。这是行不通的。那里的 div 函数有一个“role=button”。

这是负责播放按钮的 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 问题。

Edit#1：当我尝试在控制台中像这样运行 onclick 时

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

我收到了这个错误。

未捕获的类型错误：document.getElementsByClassName(...)[0].onclick 不是函数 在:1:64 （匿名）@ VM7969:1

Answer 1

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

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

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

那里，基本上我有一个div元素（称为playButton）和（使用onPlayerStateChange函数）我设置点击事件如下： p>

• 播放视频时，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”以获取更多详细信息。