Search code examples
html5-videomobile-website

Get m4v to autoplay while hidden in iOS

<video muted controls="true" loop id="v" width="100%" height="100%" src="pattern.m4v">

The video plays when I hit it direct on iOS (localhost/patter.m4v) yet it absolutely will NOT play when I hit my index.html. In fact, I can't even get the video to play by tapping on it directly even when visible.

Solution

  • This took way too long to solve for how simple of a problem it is AND how simple the solution was.

    Out of all the articles I read, this article on html5 video in webkit helped the most. If my solution does not work for you, I highly encourage you to consult that link as the solution to your problem is likely in there.

    Problems

    1. For whatever reason, my <canvas> element was over my <video> element, even if not visually. If this is your problem, there are tricks like position: absolute and/or z-index:999
    2. I needed playinline for my video or it would only play full screen. Note that autoplay and videoElement.play() only work with playinline.

    Cliff notes:

    • Apple relaxed rules on html video in iOS 10
    • autoplay works in iOS10 (a)
    • playsinlineworks in iOS10 (a)

    Code

    <video playsinline muted controls loop autoplay id="v" width="400" height="400" src="pattern.m4v">

    a: As long as it abides by the rules listed in the link above (second paragraph)