Styjun

Is every episode of "Where are my Pants?" identical?

US Healthcare consultation for visitors

Are spiders unable to hurt humans, especially very small spiders?

Could an empire control the whole planet with today's comunication methods?

Deal with toxic manager when you can't quit

Keeping a retro style to sci-fi spaceships?

For what reasons would an animal species NOT cross a *horizontal* land bridge?

Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?

What information about me do stores get via my credit card?

How to support a colleague who finds meetings extremely tiring?

What's the point in a preamp?

Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?

What happens to a Warlock's expended Spell Slots when they gain a Level?

Identify 80s or 90s comics with ripped creatures (not dwarves)

Do working physicists consider Newtonian mechanics to be "falsified"?

How to determine omitted units in a publication

Is there a way to generate uniformly distributed points on a sphere from a fixed amount of random real numbers per point?

Does Parliament hold absolute power in the UK?

Didn't get enough time to take a Coding Test - what to do now?

How did passengers keep warm on sail ships?

Presidential Pardon

should truth entail possible truth

How do I design a circuit to convert a 100 mV and 50 Hz sine wave to a square wave?

Using dividends to reduce short term capital gains?

Add event to a specific marker using javascript or jQuery

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I have a simple HTML 5 video player which I have added timeline markers.

I would like to add an event into a specific marker eg on click to play another video or show another div or text,

Here is what I have so far

 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'))
 )

Here is div I want to show to my video player

<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>

When I check class with name second_step_circle in DOM it's available, but when I click nothing is happening , here is docs for videojs marker videojs marker .

what do I need to change to get what I want?

javascript jquery html html5

share|improve this question

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Two ways I think you can use .. 1st: with onMarkerClick the plugin built in function .. 2nd: to use $(document).on('click' , '.second_step_circle', function(){
  
  – Mohamed-Yousef
  Mar 22 at 0:40
  
  

  
  
  
  

add a comment | 

1

I have a simple HTML 5 video player which I have added timeline markers.

I would like to add an event into a specific marker eg on click to play another video or show another div or text,

Here is what I have so far

 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'))
 )

Here is div I want to show to my video player

<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>

When I check class with name second_step_circle in DOM it's available, but when I click nothing is happening , here is docs for videojs marker videojs marker .

what do I need to change to get what I want?

javascript jquery html html5

share|improve this question

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Two ways I think you can use .. 1st: with onMarkerClick the plugin built in function .. 2nd: to use $(document).on('click' , '.second_step_circle', function(){
  
  – Mohamed-Yousef
  Mar 22 at 0:40
  
  

  
  
  
  

add a comment | 

I have a simple HTML 5 video player which I have added timeline markers.

I would like to add an event into a specific marker eg on click to play another video or show another div or text,

Here is what I have so far

 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'))
 )

Here is div I want to show to my video player

<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>

When I check class with name second_step_circle in DOM it's available, but when I click nothing is happening , here is docs for videojs marker videojs marker .

what do I need to change to get what I want?

javascript jquery html html5

share|improve this question

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

 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 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>

share|improve this question

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

share|improve this question

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

edited Mar 22 at 5:48

marc_s

585k13011251272

edited Mar 22 at 5:48

marc_s

585k13011251272

asked Mar 22 at 0:27

user9964622user9964622

1,25421845

asked Mar 22 at 0:27

user9964622user9964622

1,25421845