JSFiddle - React, Tailwind, and code Playground

by dorenstein

HTML

<video id="ugssp-video-player" class="im-video-player" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"></source>
    Your browser does not support HTML5 video.</video>
<div>
    <p>
        <a href="#" class="chapterLink" id="threePartBreathing">Three Part Breathing</button>
    </p>
</div>

<video id=""></video>

CSS

video.im-video-player {
  width: 100%;
}

JavaScript

var LiebmanPlayer = $('#ugssp-video-player')[0];

function skipTo(chapterName) {
	var skipTo = 0;
  
  switch(chapterName) {
  	case 'threePartBreathing':
    	skipTo = 5;
    default: 0;
  }
  
  LiebmanPlayer.play();
  /* LiebmanPlayer.pause() */;
  LiebmanPlayer.currentTime = skipTo;
  LiebmanPlayer.play();
}

$('.chapterLink').on('click', function(e) {
	e.preventDefault(); 
	var chapter = $(this).attr('id');
  skipTo(chapter);
});
/* 

jumplink.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 7;
    myvideo.play();
}, false); */

// only in to demonstrate video
/* playbutton.addEventListener("click", function () {
    if (myvideo.paused) {
        myvideo.play();
    } else {
        myvideo.pause();
    }
}, false); */