HTML CSS JS Audio Video

Video

Have you ever thought about creating video with the play/pause button on your website? Great! here's how to make it.

Demo :

Follow the code below

<!DOCTYPE html>
<html>
    <head>
        <title>Guide Video | CusMeDroid<title>
        <link rel='stylesheet' type='text/css' href='https://cusmedroid.github.io/css/style.css'>
    </head>
    <body>
        // myVideo is key id in tag video
        <video id='myVideo' class='martobo' controls loop>
            // Source your video mp4
           <source src='myvideo.mp4' type='video/mp4'>
        </video>
        <p class='Trirong marbo animate-right'>
                <button onclick='playVideo()' class='radius-20 padd-10 blue-bg white'>Play</button> <button onclick='pauseVideo()' class='radius-20 padd-10 red-bg white'>Pause</button>
        </p>
        <script type='text/javascript'>
                    // Call id #myVideo for video listener
                    var mevideo = document.getElementById('myVideo'); 
                    // Function onclick on button Play
                    function playVideo() { 
                        mevideo.play(); // Video function play
                    } 
                    // Function onclick on button Pause
                    function pauseVideo() { 
                        mevideo.pause(); // Video function pause
                    }
        </script>
    </body>
</html>