Using HTML5 Video Tag in Mobile Web: Attributes, Inline/Fullscreen Playback, Dynamic Source Replacement, Live Streaming, and Common Issues

With faster networks and more powerful phones, video content appears increasingly in mobile pages. The HTML5 <video> tag enables easy embedding of media files. In a recent mobile project we used the tag extensively and share the encountered problems and solutions.

1. Common video attributes

The <video> tag supports attributes such as src , width , height , controls , autoplay , preload , and poster . Each attribute is described below.

src

The src attribute specifies the video URL. It can also be set with a nested <source> element to provide multiple formats.

<source src="videoUrl" type="video/mp4">

<source src="videoUrl" type="video/ogg">

The video tag currently supports three formats; browser compatibility is shown in the following chart:

width / height

These attributes set the player’s dimensions, reserving space for the video during page load.

controls

When present, the browser provides playback controls such as play/pause, seek, volume, and fullscreen.

autoplay

Autoplay starts playback as soon as the video is ready, but iOS (cellular network and Safari) and some Android browsers do not support it.

preload

Preload determines whether the video data is loaded after the page loads. If autoplay is set, preload is ignored.

poster

The poster attribute shows an image before playback starts. If omitted, the first video frame is used. Some Android browsers ignore poster , causing a black background after preload; setting preload="none" keeps the poster visible until the user clicks play.

preload="none"

2. Inline vs fullscreen playback

On iOS, tapping a video opens the native fullscreen player. To force inline playback, add the webkit-playsinline attribute (supported from iOS 10). Android plays videos inline by default, but on certain devices the video layer can rise above overlays, ignoring z-index . The following X5‑kernel parameters enable fullscreen playback on Android to avoid overlay issues:

x5-video-player-type="h5"
x5-video-player-fullscreen="true"

These parameters control the X5 browser’s fullscreen behavior.

3. Video source replacement

In a single‑page Vue app, video URLs are fetched from an API and rendered reactively. Changing the src alone updates the URL but does not reload the video, so playback fails. After updating the source, call the native load() method or force a re‑render. Two approaches are shown:

Method 1: Clear the URL, then set the new one, using v‑if to trigger DOM replacement.

<video id="video"> ... </video>

Method 2: Change the component’s key value to force Vue to recreate the <video> element.

<video id="video" :key="videoUrl" ... >

4. Live streaming development

Three main streaming protocols are supported:

RTMP

Real‑Time Messaging Protocol (Adobe) offers low latency (1‑3 s) via a TCP long‑connection but lacks HTML5 compatibility.

HLS

Apple’s HTTP Live Streaming splits video into small .ts segments indexed by an .m3u8 playlist. It works on iOS, Android, and HTML5, though latency is higher (≥10 s).

HTTP‑FLV

HTTP‑FLV streams FLV data without a Content‑Length header, giving low latency similar to RTMP and better firewall traversal, but it is poorly supported in mobile browsers and is usually used in native apps.

Based on our requirements we chose RTMP and HLS, preferring RTMP and falling back to HLS when RTMP is unavailable. Because the native <video> element cannot play these streams directly, we use video.js with the vue-video-player wrapper and the videojs‑flash (for RTMP) and videojs‑contrib‑hls plugins.

npm install vue-video-player --save
npm install videojs-flash --save
npm install videojs-contrib-hls --save

import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls'

<template>
  <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" playsinline="true">
  </video-player>
</template>

export default {
  data() {
    return {
      playerOptions: {
        width: 360, // video width
        autoplay: false,
        controls: true,
        techOrder: ['flash', 'html5'],
        sourceOrder: true,
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [
          { type: 'rtmp/mp4', src: 'rtmp://xxxx' },
          { type: 'application/x-mpegURL', src: 'https://xxxx/xxxx.m3u8' }
        ],
        poster: "https://xxx.jpg"
      }
    }
  }
}

5. In‑app video playback issues

Two problems were observed in native apps:

After clicking a link that navigates away, the previous page’s video continues playing audio in the background.

When the app is sent to the background (home button) and later resumed, the hidden page’s video automatically resumes, causing unexpected sound.

Both stem from not detecting page visibility changes. Adding a visibilitychange listener and pausing the video resolves the issue:

document.addEventListener('visibilitychange', function(){
  var $video = document.getElementById('video');
  if ($video) {
    document.getElementById('video').pause();
  }
});

Conclusion

The HTML5 <video> tag is now widely used on mobile pages, but developers still face compatibility challenges on iOS and Android. Early design should consider system‑specific behaviors, and developers must keep testing new parameters and libraries to achieve the best playback experience.

Further reading

W3School video tag

HTML5 Media Events

HTML5 Video Optimization

Mobile Video Notes

SegmentFault article