HTML5 Video player comes with play and pause functionality by default. It do  not have stop functionality. Often developers creates their own custom video player to implement the functionality such as Stop button, which is not provided by the browsers by default.

Implementing the Stop functionality to an HTML5 video player is pretty much straight forward and very easy to do it. In-order to do it, we simply need to access the video element and set its currentTime value to 0.



<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <video id='myVideo' autoplay controls style="height: 300px; max-width: 100%;">
        <source src="myvideo.mp4">
    <button id="stopButton">Stop</button>
    <script src="index.js"></script>



let stopButton = document.querySelector('#stopButton');
stopButton.addEventListener('click', () => {
    let myVideo = document.querySelector('#myVideo');
    myVideo.currentTime = 0;