Имитация щелчка по элементу div с помощью "role = button" - JavaScript

Question

Добрый день,

Я знаю, что этот вопрос задавался много раз. Я искал все выше и ниже, чтобы заставить его работать, но, похоже, что-то изменилось, и ответы больше не работают.

На YouTube, когда я запускаю эту функцию simulateClick в консоли. Это работает.

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 (ранее отсталый). Это не работает. Функция 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()

Я получил эту ошибку.

Uncaught TypeError: document.getElementsByClassName (...) [0] .onclick не является функцией в: 1: 64 (анонимно) @ VM7969: 1

Answer 1

Вы можете использовать API YouTube Iframe Player для установки видео на YouTube для вставки и управления взаимодействием с ним.

Для вашего конкретного случая вам нужно воспроизвести / приостановить видео на YouTube, щелкнув элемент HTML (в данном случае, элемент div) .

Для достижения этой функциональности вы можете использовать следующий код - см. Рабочий пример в этом jsfiddle .

Там, в основном, у меня есть элемент div (называемый playButton) и (с использованием функции onPlayerStateChange) Я устанавливаю событие click следующим образом:

• Когда видео воспроизводится, div playButton будет иметь текст «Пауза», а событие щелчка позволяет приостановить видео.

• Когда видео поставлено на паузу, div playButton будет иметь текст «Play», а событие щелчка позволяет воспроизвести видео.

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>

Вот " Элементы управления воспроизведением и настройки проигрывателя " в официальной документации для получения более подробной информации.