Как заставить работать Youtube плеер?

Ссылка скопирована
Google Chrome Расширения для браузеров
1 ответ

Всем привет.
Я пытаюсь сделать расширение для браузера, которое будет просто заходить в поиск Youtube с уже введенной фразой и включать его на 10 секунд. manifest v3.

//service worker или background page если по старому //создаём вкладку chrome.tabs.create({ url: "https://www.youtube.com/results?search_query=поисковая фраза", pinned: false, active: true});  //content script: //это тоже работает if(document.querySelectorAll('a[href^="/watch?v=xxxx"]').length > 0){ // если видео есть на странице     document.querySelectorAll('a[href^="/watch?v=xxxx"]')[0].click() // кликаем по нему }  //А вот это уже не работает: document.querySelectorAll('[class="ytp-play-button ytp-button"]')[0].click() //нажатие по кнопке play

//service worker или background page если по старому //создаём вкладку chrome.tabs.create({ url: "https://www.youtube.com/results?search_query=поисковая фраза", pinned: false, active: true}); //content script: //это тоже работает if(document.querySelectorAll('a[href^="/watch?v=xxxx"]').length > 0){ // если видео есть на странице document.querySelectorAll('a[href^="/watch?v=xxxx"]')[0].click() // кликаем по нему } //А вот это уже не работает: document.querySelectorAll('[class="ytp-play-button ytp-button"]')[0].click() //нажатие по кнопке play

Как заставить видео воспроизводиться? Почему оно не стартует само? Ведь все видео стартуют сами.
Пробовал и через html event'ы, и по всякому. Если повесить клик в интервал раз в секунду - оно срабатывает, но только после того, как я нажму на пустую область в body или с чем-нибудь провзаимодействую, как будто обработчики кликов не проинициированы до первого настоящего клика. А как этот настоящий клик сделать? Хтмл евент клика мыши тоже бесполезен.

Дополнительно:

Ответы:

https://stackoverflow.com/questions/72466357/click...
перед кликом сделай тег video muted="muted", все работает

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Максим Павлов Ответ

Для того чтобы заставить работать Youtube плеер на вашем сайте, вам необходимо использовать YouTube API. Вот простой пример того, как можно встроить Youtube плеер на вашу страницу с использованием JavaScript и YouTube API.

1. Создайте новое приложение на Google Developers Console и получите API ключ для YouTube API.

2. Вставьте следующий код на вашу страницу, заменив YOUR_API_KEY на ваш собственный API ключ:

<div id="player"></div>
 
 
 
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'VIDEO_ID',
      playerVars: {
        'autoplay': 1,
        'controls': 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
 
  function onPlayerReady(event) {
    event.target.playVideo();
  }
 
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // Video has ended
    }
  }

<div id="player"></div> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'VIDEO_ID', playerVars: { 'autoplay': 1, 'controls': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { event.target.playVideo(); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { // Video has ended } }

3. Замените VIDEO_ID на ID видео, которое вы хотите воспроизвести на вашем сайте.

4. Теперь, после вставки этого кода на вашу страницу, YouTube плеер будет работать и воспроизводить видео с вашего канала.

Если у вас возникли какие-либо проблемы с встраиванием YouTube плеера, пожалуйста, уточните их, чтобы мы могли помочь вам решить их.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ