| <!DOCTYPE html> |
| <script> |
| let video; |
| function canplaythrough() { |
| parent.postMessage("Video loaded", "*"); |
| } |
| |
| function fullscreenChanged() { |
| parent.postMessage("SUCCEED - entered full screen!", "*"); |
| video.requestVideoFrameCallback(framePainted); |
| } |
| |
| function framePainted() { |
| parent.postMessage("Video frame painted.", "*"); |
| } |
| |
| onload = function() { |
| video = document.getElementById('video'); |
| var mediaFile = "../../media/content/test.ogv"; |
| video.src = mediaFile; |
| video.addEventListener('canplaythrough', canplaythrough); |
| video.addEventListener('webkitfullscreenchange', fullscreenChanged); |
| video.onclick = function(event) { |
| video.webkitRequestFullscreen(); |
| // cancel the activation behavior (click to play/pause) |
| event.preventDefault(); |
| }; |
| } |
| </script> |
| <video id="video" width="320" height="240"></video> |
