Ë
Pål Torgersen By Pål Torgersen • June 21, 2017

Autoplay looping videos on iOS and Android with HTML5

Update 19.06.2017: Looks like there will be some changes to the autoplay functionality in both Safari (iOS 11) and Chrome in the coming updates (https://www.wired.com/2017/06/new-chrome-safari-will-reshape-web/). 

We recently made a video tutorial to show how you can embed videos from the SYNQ Video API (or any other source) using the HTML5 <video>-tag on a website. More and more often, autoplaying videos are used as part of a website background or as an element of a website to make it more interactive (apple.com/clips or myprovence.fr are some examples). On mobile devices, Google and Apple previously blocked videos from autoplaying, to protect consumers from unwanted cellular data usage and thereby closed the option to have it. In both iOS and Android this also included preloading video content.

For a video to start playing on iOS and Android there had to be a user interaction. Seeing how much people love GIFs (which do “autoplay”), Google (from Chrome for Android v 53) and Apple (Safari from iOS 10) decided to allow for autoplaying videos in their mobile browsers since comparable videos and GIFs often differ greatly in file size, with  GIFs consuming upwards of 10 times more data (Here is a good example from Google). There are some specific criteria that need to be fulfilled for your HTML5 video-tag to trigger videos to autoplay on Chrome for Android and Safari for iOS.

 

Chrome for Android (from v 53)

https://developers.google.com/web/updates/2016/07/autoplay

  • Autoplay has to be set
  • Audio must be muted or the video should not have an audio track
  • In the current version of Chrome for Android (v 58) it is possible to block autoplay in two ways on the client side:
    • Activating Data Saver - In Chrome on Android: Settings > Data Saver > Toggle to "On"
    • Deactivate autoplay of videos - In Chrome on Android: Settings > Site settings > Media > Autoplay > Toggle to "Off"
    • If one of these are set, it is not possible to force autoplay using the HTML5 video tag. As a fallback, you can use a GIF as a poster image.
Safari on iOS (from iOS 10)

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

  • Audio must be muted or the video should not have an audio track
  • Autoplay has to be set
  • Use the playsinline tag, videos will play in the normal browser view instead of going fullscreen (which requires a user interaction).

To have autoplay on mobile browsers you need to use the HTML5 video tag. I uploaded a video sample using our Video API, but you can use any other service that provide you with links different sources and content delivery. Once the video had been automatically transcoded, I can usually just use the embed URL that serves our player, but for autoplay I copied the paths to the formats I wanted to make available for the player.

 

The sources I added were:
MP4
https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4

WebM
https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/webm_720/71439ccd73c74ecc8bbab7abd3bb98bc_webm_720.webm

I also created a GIF for autoplay (using giphy) for when block autoplayback is enabled on mobile devices. (I added some text, just to be able to separate the GIF from the videos):
gif_example_poster_imagehttps://media.giphy.com/media/5CIRqPOk0141W/giphy.gif

This is the code exampe I created to autoplay a looped video that is muted and has a GIF set as a poster as a fallback :

I added the GIF as a poster image, so if autoplay is blocked on the device it should just loop the GIF. Since I added some text to the GIF, you can see it flash before the video starts playing. The size of the GIF is around 2.5MB while the videos are all below 0.5MB. Since the GIF is set as the poster image it will still always load the data so this needs to be considered.

Network_log-1.png

 This is the result:

 autoplay

Make sure you test it out on different devices and with different browsers to see how it works. To make the video player responsive, we added this to our css:

Feel free to comment if you have any suggestions on how this can be done in a different or better way.

Sources:

https://developers.google.com/web/updates/2016/07/autoplay
https://googlechrome.github.io/samples/muted-autoplay/
https://webkit.org/blog/6784/new-video-policies-for-ios/
https://developer.chrome.com/multidevice/data-compression

Learn about SYNQ Media

Related posts: