How can krpano play videos on iPhone?
iPhone (for now at least iOS8) won't be able to play videos. Every time a video starts, the video element goes full screen; if you exit full screen, the video is paused.
This rule has been around so far, but I noticed that krpano can indeed play actual inline video on iPhone via WebGL: demo
From what I can tell, they are using a regular <video>
element not attached to the document:
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
Touch anywhere in here and wait for it to start.
But this is apparently not enough: when the video is playing, it goes into full screen mode.
How do they prevent the video from showing in full screen mode?
source to share
I figured they shoot a video and sync it to the audio, not actually .play()
.
I wrote a module that takes care of video playback and syncs it with audio (but it also works with video without audio track): iphone-inline-video
source to share