How We Overcame Video and Audio Pitfalls in a Holiday Web Event

Overview

This post records the development experience and pitfalls of the Tencent ABCmouse Christmas year‑end activity page, focusing on video, audio, canvas effects, and performance tuning.

Video Pitfalls

The activity starts with an inline video that only works in WeChat and QQ browsers; other browsers skip it. Inline playback requires the playsinline and webkit-playsinline attributes, and on Android the X5 kernel attribute x5-video-player-type="h5-page" is needed to keep the video on the same layer and allow overlay elements.

<video playsinline webkit-playsinline x5-video-player-type="h5-page"></video>

Automatic playback also demands a user interaction or the muted attribute; the video cannot be muted because the first 7.23 seconds contain music, so playback is triggered by a user click.

Audio Pitfalls

When the video finishes, background music should start, but on Android using the audio tag causes the video to freeze. The solution is to use the Web Audio API for playback on Android and the native audio element on other platforms.

if (lib.browser.os.android) {
  // use WebAudioPlayer
} else {
  // use AudioPlayer
}

iOS prevents automatic playback of both audio and video, so the audio is pre‑loaded and started together with the video click, then immediately paused.

Canvas Snow Effect

A full‑screen snow effect is drawn with Canvas. Snowflakes are represented by a Snowflake class with properties such as opacity, size, speed, and position. The number of flakes is calculated from the screen width and a density level.

function _initSnowflakes() {
  var level = this.options.level;
  var baseNum = LevelEnum.hasOwnProperty(level) ? LevelEnum[level] : LevelEnum.middle;
  var snowflakesNum = parseInt(this.windowWidth / baseNum);
  for (var i = 0; i < snowflakesNum; i++) {
    this.snowflakes.push(new Snowflake(this.options));
  }
}

Progress Bar and Visual Details

A colorful progress bar is drawn with Canvas. On iOS 12.3 the radial gradient is ineffective, so a solid fill is used as a fallback.

if (lib.browser.os.ios) {
  context.fillStyle = '#FFF800';
} else {
  var grad = context.createRadialGradient(x, y, r, x+r, y+r, r);
  grad.addColorStop(0, '#FFF');
  grad.addColorStop(1, '#FFF800');
  context.fillStyle = grad;
}

Frame‑by‑Frame Animation Utility

Because CSS steps() animation is limited, a custom FrameAnimation class is created to manage frame sequences, delays, and callbacks.

var FrameAnimation = function() {
  this.initialize = function(frames) {
    this.frames = Array.isArray(frames) ? frames : [];
    this.timer = null;
    this.delayTimer = null;
  };
  // ... methods: start, clear, etc.
  return FrameAnimation;
};

Usage example:

this.enterFrame = new FrameAnimation([
  { duration: 500, animation: function(){ this.titleUpElem.addClass('show'); } },
  { duration: 600, delay: 100, animation: function(){ this.titleDownElem.addClass('show'); } },
  { duration: 200, animation: function(){ this.mouseElem.addClass('show'); } }
]);

Performance Optimizations

Use requestAnimationFrame for smooth frame animation.

Control the number of snowflakes to balance visual density and frame cost.

Listen to the visibilitychange event to pause Canvas animation when the page is hidden on Android.

Avoid excessive will-change; add and remove it only when needed.

Prefer transform and opacity to reduce reflow and repaint.

References

H5同层播放器接入规范 – https://user-gold-cdn.xitu.io/2020/1/5/16f75f8933b03580

Web Audio API – https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

Canvas下雪效果 – https://github.com/abcmouse-frontend/snow

搞定这些疑难杂症，向 CSS 3 动画说 Yes – https://imweb.io/topic/5643850eed18cc424277050e

Key Images

QR code for the activity:

Video placeholder screenshot: