| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| video { |
| width: 480px; |
| height: 320px; |
| position: absolute; |
| } |
| |
| button { |
| top: 320px; |
| left: 20px; |
| position: absolute; |
| } |
| |
| body { |
| margin: 0; |
| } |
| </style> |
| <script> |
| function playing() { |
| setTimeout(function() { |
| try { |
| window.webkit.messageHandlers.testHandler.postMessage("playing"); |
| } catch(e) { |
| } |
| }, 0); |
| } |
| |
| function mousedown() { |
| document.querySelector("video").muted = true; |
| } |
| |
| function removeVideoElement() { |
| document.body.removeChild(document.querySelector("video")); |
| return document.querySelector("video"); |
| } |
| |
| function pause() { |
| document.querySelector("video").pause(); |
| } |
| |
| function stopped() { |
| setTimeout(function() { |
| try { |
| window.webkit.messageHandlers.testHandler.postMessage("paused"); |
| } catch(e) { |
| console.debug(`error: ${e}`); |
| } |
| }, 0); |
| } |
| |
| </script> |
| </head> |
| <body> |
| <video autoplay title="foo" onmousedown=mousedown() onplaying=playing() onpause=stopped()><source src="large-video-with-audio.mp4"></video> |
| <button onclick="console.log(removeVideoElement())">Stop!</button> |
| </body> |
| <html> |
