Development and Implementation of the NutUI Video Component for Mobile Web

The article introduces the NutUI video component, a mobile‑focused UI library from JD, and explains why a native <video> tag alone is insufficient for cross‑browser and cross‑device compatibility.

Background : HTML5 video playback faces many compatibility challenges on browsers (IE, Chrome, Firefox, Safari, Opera) and devices (PC, Mac, iPad, iPhone). NutUI v2.2.2 added a dedicated video component to address these issues.

Preparation : Review of the native <video> tag, its attributes (src, autoplay, muted, poster) and object properties (currentTime, duration, ended, volume) as well as event handling methods (canPlayType(), load(), play(), pause()).

Basic Implementation :

Component wraps a native video element and binds options via a unified options object and video sources via a source array.

Example markup: <video ref="video" class="nut-videoplayer" :muted="options.muted" :autoplay="options.autoplay" :loop="options.loop" :poster="options.poster" :controls="options.controls" :preload="options.preload"> <source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" /> </video>

Usage in a Vue template: <nut-video :sources="sources" :options="options"></nut-video> with data: data() { return { sources: [{ src: 'video.mp4', type: 'video/mp4' }], options: { controls: true, autoplay: true, volume: 0.6, poster: '' } } }

Custom Properties : Additional flags such as disabled , playsinline , and loop are exposed through the options object.

Custom Control Bar Implementation :

Re‑creates playback UI (play/pause button, current time, total time, progress bar, buffer bar, draggable thumb, mute button, fullscreen button).

HTML structure example: <div class="nut-video-controller"> <div class="control-play-btn" @click="play"></div> <div class="current-time">01:30</div> <div class="progress-container"> <div class="progress" ref="progressBar"> <div class="buffered"></div> <div class="video-ball" @touchmove.stop.prevent="touchSlidMove($event)" @touchstart.stop="touchSlidSrart($event)" @touchend.stop="touchSlidEnd($event)"> <div class="move-handle"></div> </div> <div class="played" ref="playedBar"></div> </div> </div> <div class="duration-time">03:30</div> <div class="volume" @click="handleMuted"></div> <div class="fullscreen-icon" @click="fullScreen"></div> </div>

Initialization obtains the video element and control elements, calculates progress bar dimensions, and binds user‑defined options (autoplay, playsinline, etc.).

Play/pause logic toggles state.playing , calls videoElm.play() or videoElm.pause() , and registers listeners for progress , timeupdate , and ended events.

Volume control sets videoElm.volume = state.vol .

Time display uses videoElm.currentTime and videoElm.duration to compute percentages and format timestamps.

Progress‑bar dragging handles touchmove and touchend events, calculates offset, clamps to bounds, and updates videoElm.currentTime accordingly.

Fullscreen toggles state.fullScreen and calls videoElm.webkitRequestFullScreen() or document.webkitCancelFullScreen() .

Issues & Solutions :

Autoplay on mobile : Ensure MP4/WebM/Ogg format, add muted , trigger playback after a user interaction, or use WeixinJSBridgeReady for WeChat.

Fullscreen gaps : Apply style="object-fit: fill;width:100%;height:100%;" to the video.

Inline playback : Use playsinline , webkit-playsinline , x5-playsinline attributes; for Android, optionally simulate with a canvas rendering loop.

Runtime errors : Remove leftover debug code; updated versions fix console errors.

Dynamic source switching : Watch sources and call videoElm.load() on change. watch: { sources: { handler(newVal, oldVal) { if (newVal && oldVal && newVal != oldVal) { this.$nextTick(() => { this.videoElm.load() }) } }, immediate: true } }

Conclusion : The NutUI video component now provides basic playback and a customizable control bar for mobile web, but further polishing is needed to achieve full compatibility and feature parity with native players. Community feedback continues to drive improvements.