embedded autoplay (transition/morph) videos on iOS - possible? if so, how?

  • We generate morph videos to improve the experience of transitioning from one panorama to the next.
    We play the FLV morph videos in the flash viewer.
    We play the MP4 morph videos in the html5 viewer - except on iOS.
    We use the krpano videoplayer plugin.

    We want the morph video to play seamlessly in iOS without user interaction (pressing a play button) or going into full screen.

    Apparently, based on my research, it is possible to automatically play embedded videos in an application with a UIWebView (not the browser) if you:
    1) Set these properties in UIWebView
    a) self.webView.allowsInlineMediaPlayback=TRUE;
    b) self.webView.mediaPlaybackRequiresUserAction = FALSE;
    2) Set these attributes in the HTML video elements:
    a) autoplay="true"
    b) webkit-playsinline="true"

    Is there a way I can achieve the same effect on iOS using krpano's videoplayer plugin?
    It is ok if we have to restrict this to a UIWebView within an application (not the browser).


  • Thanks again for your reply.
    Our viewer displays an MP4 morph video just fine in mobile safari on iPad - it plays automatically and uses the inline video player (w/o controls).

    Unfortunately, when using mobile safari on iPhone - it does not work the same way. It does play automatically, but it shows a play button and then it uses the full screen quicktime player. I'm not sure why.
    Can you help us achieve the desired iPad behavior on the iPhone?

    From what I've read, the properties that supposedly must also be set in UIWebView are set in the iPad version of mobile safari are not set in the iPhone version of mobile safari. Even after creating a native iOS application that just contains a UIWebView, and I set those properties (allowsInlineMediaPlayback, mediaPlaybackRequiresUserAction) as I described - the behavior is no different than using the browser. The video still plays automatically but the video is played in the full screen quicktime player.

    Any help/advice you have would be appreciated!


  • Hi,

    sorry, but I don't know if that iPhone behavior can be changed...

    But if you want you can try adjusting the video DOM element by yourself via JS,
    e.g. here how to get the internal video element:

    var krpano = document.getElementById("krpanoSWFObject");
    var video = krpano.get("plugin[video]").videoDOM;

    Best regards,

  • Thanks very much! That information may be very helpful soon. I'd prefer to stay within krpano script - but it is nice to know how to get access to the video element if we need more direct control in JavaScript.
    I found that we were using the videoplugin method play() and videourl instead of the method playvideo().
    After changing play() to playvideo(), plus embedding a web view in a native iOS application, we got very close to the behavior we are seeking:

    • autoplay
    • inline video player (not full screen quicktime player)

    The only other problem we have is that the video is being shown before it is ready to play.
    We had been explicitly setting the video plugin visible right before calling playvideo.
    I just moved that call to happen in the handler for "onvideoready".

    Unfortunately, the video is still being shown prematurely.

    My only other question is what Javascript event does the krpano videoplugin event "onvideoready" correspond to?

    These are the ones that I am aware of that seem to be similar (from here ):

    • canplay Fires when the browser can start playing the audio/video
    • canplaythrough Fires when the browser can play through the audio/video without stopping for buffering
    • loadeddata Fires when the browser has loaded the current frame of the audio/video
    • loadedmetadata Fires when the browser has loaded meta data for the audio/video


  • FYI - Our morph/transition experience on the iPhone only seems to play seamlessly (autoplay and inline video player) when I execute this Javascript method (which I thought/hoped was unnecessary):

    function alterVideoElements()
    var list=document.getElementsByTagName("video");
    var elt=null;
    for (var i=0; i<list.length; i++)
    elt = list[i];
    elt.setAttribute("autoplay", "true");
    elt.setAttribute("webkit-playsinline", "true");

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!