3 mistakes in HTML5 creatives • embedded video

While preparing HTML5 creatives that contain an embedded video file, we face a few common problems, mostly on mobile devices.

Video stops on the first frame

Checking creative on iOS/Android devices, we notice that the video wants to play while it works on desktop.

Reason

Mobile devices have more strict requirements regarding multimedia then desktop browsers. It is essential to match the video specification for mobile devices. It is recommended to not use video bitrate over 500 kbit/s when the device is using the cellular internet connection, the problem mostly happens on iOS and sometimes also on lower-end Android devices.

Solution

Make sure that the video file is transcoded with the specification explained bellow. From my experience, when I see a video file in the creation which has over 1-2MB, it fails to load on most of the iOS devices.

Technical mobile video specification

Video specification bellow is recommended by Apple, Android, Google, and IAB as the optimal ones, and it does only cover the case when the video file is directly embedded in the HTML5. It does not cover video specifications for VAST/VPAID in-stream videos, while most of the platforms transcode video by themselves.

For video file will end up being approximately 700 KB per 15 seconds at 500 kbit/s bitrate, but this may vary depending on creative content.

By default, software like Adobe After Effects or HandBrake put default compression values as low as possible to generate as good output video as possible.

Video won’t start with autoplay option

If we have the fixed problem described above, and the creative with the video still does not play a video, you might have another problem.

I assume you try to play a video as soon as the creative is loaded by adding autoplay attribute to the video tag or by executing JavaScript native method .play(). Whatever you try to do video will not start to play.

Reason

Your video probably contains audio. It is not allowed by Google to autoplay video with a sound. Sound must be muted.

Solution 1: no audio

If you don’t need audio, transcode your video again, and remove the audio track. A new generated video file will autoplay without any problems. You can always add a muted attribute to the video tag.

Solution 2: with audio

So you need to have audio, but you also need autoplay your video. What you can do is to autoplay your video, with muted attributed, which will disable audio. Then you need to add a custom audio button to on/off audio in the video. It will require a bit of JavaScript coding. There is no other way to go around this problem.

<video muted autoplay playsinline controls="controls" poster="poster_image.jpg">
   <source type="video/mp4" src="video.mp4" />
</video>

The video opens in full-screen mode on iOS

Let’s take as an example 300×250 HTML5 creative, which has embedded a video file. Everything works fine until you don’t try to open your creative preview on any iOS device in the Safari browser. You will notice that video from the background of your creative opens in the full-screen mode.

Reason

iOS/Safari, by default, opens any video media file in the full-screen mode. It is not a bug. It is a feature.

Solution for iOS 10+

Just add “playsinline” attribute to the video tag. This attribute will inform the Safari browser to play a media file inside of the document area where it was embedded without opening a system full-screen modal window.

<video playsinline controls="controls" poster="poster_image.jpg">
   <source type="video/mp4" src="video.mp4" />
</video>

Solution Google Web Designer

All creatives built with Google Web Designer after March 14, 2019, automatically include the playsinline attribute.

Solution for iOS 8 & iOS 9

Unfortunately “playsinline” attribute was introduced with iOS 10. To get the same effect, you need to implement iphone-inline-video. The effect will be the same as described above.

Links

• Play videos in-line on iOS
• Bitrate and Video Format
• Apple Ad Specifications
• Digital Video In-Stream Ad Format Guidelines
• Autoplay Policy Changes

• 
  Contact Me
  Contact me if you need advice or if you need help. Would you please choose the most suitable contact channel for you?
• 
  My Services
  If you need a technical specialist to technical support to fix your problems, you are in the right place.
• 
  Who I am
  Hello, my name is Wojtek, I’m an experienced Software Engineer, with many many years of experience in the advertising industry.