| <!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) { } |
| } |
| |
| 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(); |
| } |
| |
| function playAudio() { |
| window.webkit.messageHandlers.testHandler.postMessage('playAudio'); |
| const audio = document.getElementsByTagName('audio')[0]; |
| audio.play().then(playing).catch(notPlaying); |
| } |
| |
| let canvasTimer; |
| function startCanvasUpdate() |
| { |
| stopCanvasUpdate(); |
| canvasTimer = setInterval(() => { |
| window.webkit.messageHandlers.testHandler.postMessage('canvasClearFill'); |
| myCanvas.getContext('2d').clearRect(0, 0, 50, 50); |
| myCanvas.getContext('2d').fillRect(0, 0, 100, 100); |
| }, 50); |
| } |
| |
| function stopCanvasUpdate() |
| { |
| if (canvasTimer) |
| clearInterval(canvasTimer); |
| } |
| |
| document.addEventListener('pageshow', go); |
| </script> |
| </head> |
| <body onload="go()"> |
| <video src="video-with-audio.mp4" webkit-playsinline></video> |
| <audio src="video-with-audio.mp4" webkit-playsinline></audio> |
| <canvas id="myCanvas" width="200" height="200"></canvas> |
| </body> |
| </html> |
