video .play() on iOS 9 triggers native player

  • Hello,

    I have an issue with the krpano videoplayer plugin on iOS 9.
    I want to programatically start playing the video in fullscreen on user click/touch etc on a div container. I have the following code triggered after embedding the pano:


    container.addEventListener('click', function () {
    var krpano = document.getElementById("krpanoSWFObject");
    var video = krpano.get("plugin[video]").videoDOM;
    krpano.call("toggle(fullscreen)");
    video.play();
    });

    The play statement opens up the iOS native player and my player is in the background, paused. The same code runs fine on other devices. If I remove play(), the native player ofc doesn't pop up, but I need the krpano to start automatically after the first user interaction.
    I understand there is a workaround implemented to handle iOS 9 limitation. Calling video play() seems not to include that workaround, or does it work just in the user interface and cannot be played programatically?

    Thanks

  • Hi,

    The solution is:

    <= iOS 9:
    Add the atribute "webkit-playsinline" to the video element.

    >= iOS 10:
    Add the atribute "playsinline" to the video element.


    if you want to autostart the video, you should mute the video by add the "muted" and "autostart" attributes to the video element. WebKit blocks "autostart" in non muted videos. However you could always click in the screen to start the video.


    Reference: https://webkit.org/blog/6784/new-video-policies-for-ios/

    Cheers

Participate now!

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