<html>
    <head>
        <script>
            function pageLoaded() {
                document.getElementById("video").play();
                try {
                    window.webkit.messageHandlers.testHandler.postMessage("loaded");
                } catch(e) { }
            }

            function play() {
                var video = document.getElementById("video");
                if (video.paused)
                    video.play();
                else
                    video.pause();
            }

            function mute() {
                document.getElementById("video").muted = true;
            }

            function beganPlaying() {
                try {
                    window.webkit.messageHandlers.testHandler.postMessage("playing");
                } catch(e) { }
            }

            function endedPlaying() {
                try {
                    window.webkit.messageHandlers.testHandler.postMessage("ended");
                } catch(e) { }
            }
        </script>
    </head>
    <body onload="pageLoaded()">
        <button onclick="play()">Play</button>
        <button onclick="mute()">Mute</button>
        <video id="video" onplaying=beganPlaying() onended=endedPlaying() src="test.mp4" />
    </body>
</html>