<h2>Build the Player with Button Overlay</h2>
We can build a simple HTML5 video player with the VIDEO tag. HTML5 video tag options lets us set the video to muted and loop by default. 
<img src="/images/html5_video.png" width="600px" style="margin: 20px auto;" />
The onMouseEnter event will start playing the video with sound by seting vid.muted to false and trigger vid.play(). 
<img src="/images/startVideo.png" width="600px" style="margin: 20px auto;"/>
The onMouseOut event will stop playing the video by setting vid.muted to true and trigger event.target.pause().
<img src="/images/pauseVideo.png" width="600px" style="margin: 20px auto;"/>
Our html5 video could be ID either via document.getElementById method or by the event.target. 
We show and hide the Play Button using State and Conditional Rendering
<img src="/images/hidden_play_button.png" width="600px" style="margin: 20px auto;"/>
<h2>React State to Store Play Time</h2>
The views count is stored locally in react state intially.
<img src="/images/local_store_state.png" width="600px" style="margin: 20px auto;"/>
And then we update the database and local state whenever there are a new Play Video event.
<img src="/images/update_store_db.png" width="600px" style="margin: 20px auto;"/>
<h2>API for inserting PLaytime into Database</h2>
When the client hits our DB endpoint for Views Count api/update_views then
the API will connect to our MONGODB database, search the store by id and then
using the $inc feature to increase views count of the store in interest by one. 
<img src="/images/update_views_api.png" width="600px" style="margin: 20px auto;"/>