<!DOCTYPE html>
<html>
<head>
    <script>
    function go() {
        var video = document.getElementsByTagName('video')[0];
        video.play().then(playing).catch(notPlaying);
    }

    function playing() {
        try {
            window.webkit.messageHandlers.testHandler.postMessage('playing');
        } catch(e) {
            window.location = 'callback:playing';
        }
    }

    function paused() {
        try {
            window.webkit.messageHandlers.testHandler.postMessage('paused');
        } catch(e) { }
    }

    function notPlaying() {
        try {
            window.webkit.messageHandlers.testHandler.postMessage('not playing');
        } catch(e) { }
    }

    function pause() {
        let video = document.getElementsByTagName('video')[0];
        video.addEventListener("pause", paused, { once: true });
        video.pause();
    }

    function play() {
        go();
    }

    document.addEventListener('pageshow', go);
   </script>
</head>
<body onload="go()">
    <video src="video-with-audio.mp4" webkit-playsinline></video>
</body>
</html>