Navigation

Related Articles

Back to Latest Articles

3 mistakes in HTML5 creatives • embedded video


Wojtek Andrzejczak
3 mistakes in HTML5 creatives • embedded...

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 Codec H.264
Progressive Download Format When encoding an MP4 for progressive streaming, use the “web-optimized” setting.
Video Target Bitratemax. 500 kbit/s
H.264 Profile/LevelBaseline profile, level 3.0
Video InterlacingProgressive scanning, ie non-interlaced.
No intra-field motion (blended frames) or interlacing
Audio CodecAAC-LC or HE-AACv1
Audio Bitrate128-192 kbps for AAC-LC,
64-128 kbps for HE-AACv1
Audio Levels-24 LKFS (+/- 2.0 dB) in the US as per ATSC A/85,
-23 LUFS (+/- 1.0) in the EU as per EBU R128

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

Subscribe to receive updates about new articles.

Show Comments (8)

Comments

  • Pablo Escobar

    So no 4k videos?

    • Article Author
    • Reply
    • Wojtek Andrzejaczak

      Not exactly, with modern mobile phones and 5G, it is not a problem to run 4K video, you need continuous 10-20Mbit/s transmission rate, low latency. But if you prepare ads to be distributed to all possible devices in all possible places. You need to take the worst-case scenario for your ads to run on as much as many devices in most case scenarios.

      Besides, iOS does not provide JavaScript (type “navigator.connection” in Developer Tools console) information if the device is connected to the WiFi or cellular network.

      • Article Author
      • Reply
  • Dominik

    “It is not a bug. It is a feature.”

    • Article Author
    • Reply
    • Wojtek Andrzejaczak

      Exactly 😀

      • Article Author
      • Reply
  • 3 most common HTML5 creatives performance mistakes • Advertising & Web development

    […] technical details on how to prepare the correct video file you can find in the 3 mistakes in HTML5 creatives […]

    • Article Author
    • Reply
  • xxx102.xyz

    We stumbled over here by a different website and thought I might
    check things out. I like what I see so i am just following you.
    Look forward to going over your web page again.

    • Article Author
    • Reply
    • Wojtek Andrzejczak

      Thank you 🙂

      • Article Author
      • Reply
  • Davis

    Very nice post. I just stumbled upon your blog and wished to say
    that I have really enjoyed surfing around your blog posts.
    In any case I will be subscribing to your feed and I hope
    you write again soon!

    • Article Author
    • Reply

Related Articles

Guidelines for creatives

Google Studio • HTML5 creatives guide

Google Web Designer and Adobe Animate CC – Learn how you can prepare HTML5 creatives compatible with Google Studio for Google Marketing Platform campaigns.

Posted on by Wojtek Andrzejczak
Guidelines for creatives

3 most common HTML5 creatives performance mistakes

Learn how to improve HTML5 creatives loading performance and avoid common mistakes.

Posted on by Wojtek Andrzejczak