Блог

У меня есть простой видеопроигрыватель HTML 5, в который я добавил маркеры временной шкалы.

Я хотел бы добавить событие в определенный маркер, например, при нажатии, чтобы воспроизвести другое видео или показать другой div или текст,

Вот что у меня есть на данный момент

  var video = videojs('video1');
    //load markers
    video.markers({

        markers: [{
                time: 7,
                class: "first_step_circle"
            },
            {
                time: 16,
                text: "is",
                class: "second_step_circle"
            },
            {
                time: 23.6,
                text: "so"
            },
            {
                time: 28,
                text: "cool"
            }
        ]
    });

 $('.second_step_circle').on('click', function(){
        openPopUp('.persona2PopUp');
        console.log(openPopUp('.persona2PopUp'))
    })
  

Вот div, который я хочу показать своему видеоплееру

 <div class="lightbox persona2PopUp">
    <img src="images/Matt.jpg">
    <h5>Matt Briscoe</h5>
    <p>Role: Developer</p>
    <p>Bio: Matt has been a manager for 4 years. This alkjdlas asldkjasldj aslkdj aklsdjlsakdjalskjd salkdj salkjd</p>
    <p>Previous Experiences</p>
    <ul>
        <li>Experience 1: 2002-2004</li>
        <li>Experience 2: 2005-2009</li>
        <li>Experience 3: 2010-2016</li>
    </ul>
</div>
  

Когда я проверяю класс с именем second_step_circle в DOM, он доступен, но когда я нажимаю, ничего не происходит, вот документы для маркера videojs videojs marker .

что мне нужно изменить, чтобы получить то, что я хочу?