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

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电视(以前是leanback)时。这没用。那里的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””，尽管它使类正确。这没用。

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

附注:这是一个纯JavaScript问题，而不是jQuery问题。

编辑＃1:当我尝试在控制台中像这样运行onclick时

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

我得到这个错误。

Uncaught TypeError: document.getElementsByClassName(...)[0].onclick is not a function at :1:64 (anonymous) @ VM7969:1

Answer 1

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

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

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

在那里，基本上，我有一个div元素(称为playButton)，并且(使用onPlayerStateChange函数)我将click事件设置如下:

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

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

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”，以获取更多详细信息。