Building a Custom Video Player in React & Vue

{formatTime(time)} / {formatTime(duration)}

import { ref } from 'vue'; export default { name: 'VideoPlayer', props: { src: { type: String, required: true }, poster: { type: String, default: '' }, }, setup(props) { const player = ref(null); const playing = ref(false); const muted = ref(false); const time = ref(0); const duration = ref(0); const togglePlay = () => { if (!playing.value) { player.value.play(); playing.value = true; } else { player.value.pause(); playing.value = false; } }; const toggleMute = () => { player.value.muted = !muted.value; muted.value = !muted.value; }; const onTimeUpdate = () => { time.value = player.value.currentTime; }; const onLoadedData = () => { duration.value = player.value.duration; }; const formatTime = (seconds) => { const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); return `${m.toString().padStart(2, '0')}:${s .toString() .padStart(2, '0')}`; }; return { player, playing, muted, time, duration, togglePlay, toggleMute, onTimeUpdate, onLoadedData, formatTime, }; }, }; .video-wrapper { position: relative; width: 100%; max-width: 720px; margin: auto; } video { width: 100%; height: auto; background: black; } .controls { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } button { padding: 6px 10px; cursor: pointer; } import VideoPlayer from './components/VideoPlayer.vue'; export default { components: { VideoPlayer }, };

Boost Campaign Performance Through Video