HTML5 In-Banner Video Loading Guidelines

"User-initiated" video is defined as video which does not load at all unless a user clicks a "play" button, or some other button which implies the interaction will result in a video loading and playing. No part of the video should be loaded up front or "pre-loaded".

"Auto-play" video is allowed where specified, and unless otherwise noted, should be muted (no audio) upon initial playback. A user may then have the option to un-mute the video. Auto-play video is usually limited in file size, and meant as a "preview" to entice a user to load the full-legth video.

Real world example: Loading video on user-interation

Based on HTML5 video standards

Use JavaScript to load in the video source, rather than relying on the HTML5 attributes to prevent playback

Correct: Incorrect:
  • Video playback is controlled via JavaScript
  • Video assets cannot possibly load automatically unless a user clicks "play" - and via JavaScript, the video source is populated and playback begins
  • Video playback is controlled through HTML5 markup only
  • HTML5 markup of "preload=false" cannot be relied upon for suppressing the video load - as this is not a hard rule and may not prevent video loading 100% of the time.


Example:

JavaScript is used to populate the HTML5 video source, and begin playback:

<video id="overlayVideo" controls muted playsinline autoplay controlsList="nodownload">
<source type="video/mp4" src="" />
</video>

<br/>

<button onclick="checkIt()">LOAD AND PLAY VIDEO</button>

<script>
function checkIt(){
var overVid = document.getElementById("overlayVideo");
overVid.setAttribute("src","https://secure.espncdn.com/ad/html5/2017/marketing/espn/SEA_ad_172712_BMBOC30AH_6MB_30_1.mp4");
overVid.load();
}
</script>

In action: