Youtube Like Custome Video Media Player in Articulate

Hello,

Try to build a Video Player with all the features like in Youtube but not able to get success on that, if anyone please help me or guide me with code (JavaScript or HTML-CSS).

here I'm attached my wish.

1.      Need to create a Custom Player using storyline360 in inside the course as shown in the image.

2.      Seek bar functionality:

Seek bar should run as per slide progress 0% - 100%,

After completing 100% slide progress it should be active to drag it,

While dragging the seek bar we need to get a small thumbnail.

Next Button should be in disabled for first visit; it should be active after completion of the slide.

3.      Play/ Pause/ Replay and Volume has to be controlled from the custom buttons as shown in the image.

4.      This complete player needs to be visible when user mouse over on screen, same like YouTube Player.