Vue.js suits video application development by leveraging reactivity to synchronize UI elements (such as progress bars, seek controls, and clip overlays) with playback states, minimizing manual event handling. Its single-file components modularize complex interfaces for editing timelines and streaming players.
On the other side, the lightweight core ensures fluid performance on mobile and low-end devices. Integrate FFmpeg.wasm for client-side processing or HLS.js for adaptive streaming without server dependencies, enabling scalable, API-driven video workflows that outperform heavier frameworks in real-time interactions.
Prerequisites
- Understand DOM manipulation, events, and styling for interactive video UIs.
- Know directives (e.g., v-bind, v-on), components, reactivity (e.g., data, computed), and lifecycle hooks (e.g., mounted, beforeUnmount).
- Use LTS version (v18+ recommended) from nodejs.org. Verify with node -v and npm -v. A code editor like VS Code with the Volar extension is helpful for Vue development.
- Prepare local files (MP4/WebM in your project's public/ folder) or API keys for services like YouTube, Vimeo, or HLS streams. Ensure CORS is handled for remote assets.
Set Up a Vue Project
For modern Vue 3 projects, use Vite (faster than the deprecated Vue CLI). Run npm create vue@latest video-app in your terminal. During setup, select:
Yes for TypeScript (optional, but recommended for larger apps).
Yes for Vue Router (for multi-page video apps).
No for Pinia (unless managing global state).
No for Vitest (add later if needed).
Navigate to the project directory (cd video-app), install dependencies (npm install), and start the development server (npm run dev). Access the app at http://localhost:5173 to confirm setup. Vite provides hot module replacement for rapid iteration.
If you prefer Vue CLI (legacy), install with npm install -g @vue/cli, create with vue create video-app (select Vue 3), then npm run serve (port 8080). However, migrate to Vite for future-proofing.
Integrate Video Elements in Vue Components
Use the HTML5 <video> element within Vue single-file components for native playback support.
Create a basic video player component by importing it into your Vue file and binding sources dynamically with v-bind:src (shorthand :src). For reusability, use props. In src/components/VideoPlayer.vue:
<template>
<div>
<video :src="videoSrc" controls crossorigin="anonymous" width="640" height="360"></video>
</div>
</template>
<script>
export default {
name: 'VideoPlayer',
props: {
videoSrc: {
type: String,
required: true,
default: '/sample.mp4' // Fallback; place in public/
}
}
// Composition API alternative: import { ref, watch } from 'vue'; setup(props) { const src = ref(props.videoSrc); }
};
</script>Import and use in src/App.vue: <VideoPlayer :videoSrc="'/path/to/your/video.mp4'" />. Handle events like play, pause, and load using Vue's @event directives (shorthand for v-on:event) to manage interactions reactively.
Extend the Example:
<template>
<video
:src="videoSrc"
@play="onPlay"
@pause="onPause"
@loadeddata="onLoad"
width="640"
height="360"
></video>
</template>
<script>
export default {
name: 'VideoPlayer',
props: { videoSrc: String },
methods: {
onPlay() { console.log('Video playing'); /* Emit event or update state */ },
onPause() { console.log('Video paused'); },
onLoad() { console.log('Video loaded'); }
}
};
</script>The crossorigin="anonymous" attribute enables CORS for remote videos; add credentials if authenticated.
Adding Video Controls and UI Enhancements
Enhance the player with custom controls using Vue's reactivity for real-time updates. Implement sliders for volume and progress with v-model for 2-way binding. Update VideoPlayer.vue to use refs for DOM access and @loadedmetadata for early duration detection:
<template>
<div class="video-container">
<video
ref="video"
:src="videoSrc"
@timeupdate="updateProgress"
@loadedmetadata="setDuration"
width="640"
height="360"
></video>
<div class="controls">
<input type="range" v-model="currentTime" min="0" :max="duration" @input="seek" />
<input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume" />
</div>
</div>
</template>
<script>
export default {
name: 'VideoPlayer',
props: { videoSrc: String },
data() {
return { currentTime: 0, duration: 0, volume: 1 };
},
methods: {
setDuration() {
this.duration = this.$refs.video.duration;
},
updateProgress() {
this.currentTime = this.$refs.video.currentTime;
},
seek() { this.$refs.video.currentTime = this.currentTime; },
setVolume() { this.$refs.video.volume = this.volume; }
}
};
</script>
<style scoped>
.video-container { max-width: 100%; text-align: center; }
.controls { margin-top: 10px; }
input[type="range"] { width: 100%; margin: 5px 0; }
@media (max-width: 640px) {
video { width: 100%; height: auto; }
}
</style>For pre-built UI elements, integrate Vuetify (Material Design). Install with npm install vuetify @mdi/font. In src/main.js, set up:
import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import 'vuetify/styles';
import '@mdi/font/css/materialdesignicons.css'; // Icons
import App from './App.vue';
const vuetify = createVuetify({
components,
directives
});
createApp(App).use(vuetify).mount('#app');Use in components, e.g., replace range inputs with <v-slider v-model="volume" :min="0" :max="1" :step="0.1" @update:model-value="setVolume" hide-details></v-slider> for styled, accessible controls.
Working with Video APIs and Streaming
Integrate external libraries for advanced playback features like custom skins or adaptive streaming. For Video.js (robust player with plugins), install npm install video.js vue3-video-player (Vue 3 wrapper). Import CSS: import 'video.js/dist/video-js.css';. In VideoPlayer.vue:
<template>
<div class="video-js-container">
<video-player
class="vjs-video-player vjs-default-skin"
:options="playerOptions"
@ready="onPlayerReady"
/>
</div>
</template>
<script>
import { videoPlayer } from 'vue3-video-player';
import 'video.js/dist/video-js.css';
export default {
name: 'VideoPlayer',
components: { videoPlayer },
props: { videoSrc: String },
data() {
return {
playerOptions: {
controls: true,
fluid: true,
sources: [{ src: this.videoSrc, type: 'video/mp4' }]
}
};
},
methods: {
onPlayerReady(player) {
this.player = player;
console.log('Player ready');
}
},
beforeUnmount() {
if (this.player) {
this.player.dispose();
}
}
};
</script>
<style scoped>
.video-js-container { width: 100%; }
</style>For live streaming, use HLS.js for adaptive bitrate (HLS/M3U8). Install npm install hls.js. Add to VideoPlayer.vue (assumes basic <video> template):
<template>
<div>
<video ref="video" controls width="640" height="360"></video>
</div>
</template>
<script>
import Hls from 'hls.js';
export default {
name: 'HLSPlayer',
props: { streamSrc: String }, // e.g., 'https://example.com/stream.m3u8'
data() {
return { hls: null };
},
mounted() {
const video = this.$refs.video;
if (Hls.isSupported()) {
this.hls = new Hls({
enableWorker: true,
lowLatencyMode: true
});
this.hls.loadSource(this.streamSrc);
this.hls.attachMedia(video);
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS Error:', data);
// Fallback or retry logic
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = this.streamSrc;
video.addEventListener('loadedmetadata', () => video.play());
}
},
beforeUnmount() {
if (this.hls) {
this.hls.destroy();
}
}
};
</script>Building Advanced Video Editing Features
Develop editing tools by combining Vue with the Canvas API or FFmpeg.wasm for client-side processing (no server needed, but heavy for large files). Create timeline components with draggable segments using @vuedraggable/vue3 (Vue 3 compatible). Install npm install @vuedraggable/vue3. In src/components/VideoTimeline.vue:
<template>
<div class="timeline">
<draggable v-model="clips" item-key="id" class="clip-list">
<div v-for="clip in clips" :key="clip.id" class="clip">{{ clip.name }} ({{ clip.duration }}s)</div>
</draggable>
<button @click="addClip">Add Clip</button>
</div>
</template>
<script>
import draggable from '@vuedraggable/vue3';
export default {
name: 'VideoTimeline',
components: { draggable },
data() {
return {
clips: [
{ id: 1, name: 'Clip 1', duration: 10 },
{ id: 2, name: 'Clip 2', duration: 15 }
]
};
},
methods: {
addClip() {
this.clips.push({ id: Date.now(), name: `Clip ${this.clips.length + 1}`, duration: 5 });
}
}
};
</script>
<style scoped>
.timeline { padding: 20px; }
.clip-list { display: flex; gap: 10px; flex-wrap: wrap; }
.clip { padding: 10px; background: #f0f0f0; border: 1px solid #ccc; cursor: move; }
</style>Process clips asynchronously with Promises, updating the UI reactively. Use FFmpeg.wasm for trimming (install npm install @ffmpeg/ffmpeg @ffmpeg/util). In VideoEditor.vue (integrate with timeline):
<template>
<div>
<video :src="editedVideoSrc" controls v-if="editedVideoSrc"></video>
<button @click="trimVideo(5, 20)" :disabled="loading">Trim Video</button>
<p v-if="loading">Processing...</p>
</div>
</template>
<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
export default {
name: 'VideoEditor',
data() {
return {
videoSrc: '/input.mp4', // Original file
editedVideoSrc: null,
loading: false
};
},
methods: {
async trimVideo(start, end) {
this.loading = true;
try {
const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
// Fetch file as ArrayBuffer
const response = await fetch(this.videoSrc);
const buffer = await response.arrayBuffer();
await ffmpeg.writeFile('input.mp4', new Uint8Array(buffer));
await ffmpeg.exec([
'-i', 'input.mp4',
'-ss', start.toString(),
'-to', end.toString(),
'-c', 'copy', // Faster, no re-encode
'output.mp4'
]);
const data = await ffmpeg.readFile('output.mp4');
this.editedVideoSrc = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
} catch (error) {
console.error('Edit failed:', error);
// User feedback: this.error = 'Processing failed';
} finally {
this.loading = false;
}
}
},
beforeUnmount() {
if (this.editedVideoSrc) URL.revokeObjectURL(this.editedVideoSrc); // Cleanup
}
};
</script>For overlays, use Canvas: In mounted(), draw on <canvas ref="canvas" width="640" height="360"></canvas> with ctx.drawImage(video, 0, 0);.
Note: FFmpeg.wasm is ~30MB; load lazily or use Web Workers for better perf. For complex edits, consider server-side processing.
Optimizing Performance for Video Applications
Address bottlenecks by lazy-loading components and optimizing renders. Use Vue Router for lazy-loading video pages. Install npm install vue-router (if not during setup). In src/router/index.js:
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/video/:id',
name: 'Video',
component: () => import('../components/VideoPlayer.vue') // Lazy load
}
]
});
export default router;In main.js, add app.use(router);. Use computed properties for derived metadata to avoid re-renders. In VideoPlayer.vue:
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/video/:id',
name: 'Video',
component: () => import('../components/VideoPlayer.vue') // Lazy load
}
]
});
export default router;Implement virtualization for video lists with vue-virtual-scroller (npm install vue-virtual-scroller). In a list component:
<script>
export default {
// ... data and methods
computed: {
videoProgress() {
return this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
},
formattedDuration() {
return this.formatTime(this.duration);
}
},
methods: {
formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
}
};
</script>Compress assets with FFmpeg in a build script (e.g., via npm script: ffmpeg -i input.mp4 -vcodec libx264 -crf 23 output.mp4). Add preload="metadata" to <video> for faster loads, and use adaptive sources for bandwidth.
Deployment and Best Practices
Deploy to platforms like Vercel or Netlify: Run npm run build to generate the dist/ folder, then upload it or connect your Git repo for CI/CD. Vercel auto-detects Vite; configure vercel.json for custom routes if needed. Follow best practices:
Error Handling: For load failures, add @error="onError" to <video>:
methods: {
onError(event) {
console.error('Load failed:', event);
// User feedback: Show fallback image or retry button
this.errorMessage = 'Video failed to load. Please try again.';
}
}Accessibility Compliance: Use ARIA: <video aria-label="Main video player" controlslist="nodownload nofullscreen" @error="onError">. Add <track kind="captions" src="captions.vtt" srclang="en" label="English"> for subtitles. Ensure keyboard navigation for custom controls (e.g., tabindex).
Security: Sanitize dynamic src URLs (e.g., via props validation) to prevent XSS. Use HTTPS for streams.
Other: Make it a PWA for offline caching (add vite-plugin-pwa). For SEO, use video sitemaps and Open Graph tags.
Test across browsers with BrowserStack or Chrome DevTools (emulate devices/networks). Verify MP4/WebM support, HLS fallback (Safari), and touch events on mobile. Check for deprecations in the console. For production, consider state management (Pinia) and unit tests (Vitest: npm test).