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,
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
Chrome for Android (from v 53)
- 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
areset, it isnot possible to force autoplay using the HTML5 video tag. As a fallback, you can use a GIF as a poster image.
- Audio must be muted or the video should not have
- Autoplay has to be set
- Use the
playsinlinetag, 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
The sources I added were:
I also created a GIF for autoplay (using
This is the code
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.
This is the result:
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
Feel free to comment if you have any suggestions on how this can be done in a different or better way.