HTML5 Game - Replace the default media controls for video element

  1. HOME
  2. HTML5 Game
  3. Video
  4. HTMLVideoElement Attributes

Introduction

You can use the playback methods to replace the default media controls.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <video id="media" width="360" height="240" preload="auto">
            <source src="http://java2s.com/style/demo/your.webm"/>
            <source src="http://java2s.com/style/demo/your.ogv"/>
            <source src="http://java2s.com/style/demo/your.mp4"/>
            Video cannot be displayed//www.  jav  a  2 s.  c om
        </video>
        <div>
            <button>Play</button>
            <button>Pause</button>
        </div>
        <script>
            let mediaElem = document.getElementById("media");
            
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            function handleButtonPress(e) {
                switch (e.target.innerHTML) {
                    case 'Play':
                        mediaElem.play();
                        break;
                    case 'Pause':
                        mediaElem.pause();
                        break;
                }
            }
        </script>
    </body>
</html>

Related Topic