Автоматическое отображение изображения при загрузке YT-плеером видеоидентификаторов, подключенных к изображению

Простите меня, но я не очень практичен с кодом, и я пытаюсь связать отображение серии идентификаторов видео с YT api со списком заголовков в тексте со связанными видео, практически со списком видео. Я хотел бы, чтобы эти заголовки меняли цвет при просмотре связанного видео, а заголовки были активными для перехода непосредственно к видео. в приложении вы найдете пример изображение .. На данный момент я начинаю с этого кода ..

<script type = "text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = 
document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, 
firstScriptTag);


/**
 * Put your video IDs in this array
 */

var videoIDs = [
  'CIx0a1vcYPc',
  't8LD0iUYv80',
  'I3Ltb7sLhb0'/
];


var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '505',
    width: '900',
    playerVars: {
      controls: 1,
      showinfo: 1,
      autoplay: 1,
      mute: 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.loadVideoById(videoIDs[currentVideoId]);
  
    // bind events
    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
        player.playVideo();
    });

    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
        player.pauseVideo();
    });
 var next = document.getElementById("next");
    next.addEventListener("click", function() {
        player.nextVideo();
    });
    
 var pre = document.getElementById("previous");
    pre.addEventListener("click", function() {
        player.previousVideo();
    });
    
     var unmute = document.getElementById("unMute");
    unMute.addEventListener("click", function() {
        player.unMute();
        
    });
    
     var unmute = document.getElementById("mute");
    mute.addEventListener("click", function() {
        player.mute();
        
    });
    
     player.loadPlaylist( {
        playlist:videoIDs
    } );
    
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
      player.loadVideoById(videoIDs[currentVideoId]);
    }
  }
}
</script>

Вы можете получить названия видео в том же формате, что и для этих video_ids.

Marco Aurelio Fernandez Reyes 30.03.2021 20:47

Да, я так думаю, но я не знаю, как это сделать.

Andy 31.03.2021 02:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
32
0

Другие вопросы по теме