1. 項(xiàng)目概述在Vue中駕馭原生Video標(biāo)簽在開發(fā)現(xiàn)代Web應(yīng)用時視頻播放是一個高頻需求。無論是內(nèi)容展示、產(chǎn)品介紹還是在線教育流暢、可控的視頻體驗(yàn)都至關(guān)重要。很多開發(fā)者一上來就想著找現(xiàn)成的第三方播放器組件這當(dāng)然沒問題但有時候項(xiàng)目需求簡單或者對包體積有嚴(yán)格要求直接使用HTML5原生的video標(biāo)簽反而是最輕量、最靈活的選擇。尤其是在Vue這種響應(yīng)式框架里如何將原生的DOM元素與Vue的響應(yīng)式數(shù)據(jù)和生命周期無縫結(jié)合是每個前端都需要掌握的基本功。這個內(nèi)容就是來解決這個問題的在Vue項(xiàng)目中如何有效地使用video標(biāo)簽來實(shí)現(xiàn)視頻播放功能。它不僅僅是把標(biāo)簽丟到模板里那么簡單而是涵蓋了從基礎(chǔ)播放控制、事件響應(yīng)、自定義UI皮膚到處理復(fù)雜格式比如熱詞里提到的m3u8、性能優(yōu)化以及移動端適配等一系列實(shí)操要點(diǎn)。無論你是剛接觸Vue的新手還是想優(yōu)化現(xiàn)有播放邏輯的老手這里面的細(xì)節(jié)和“坑”都值得你仔細(xì)琢磨。我會結(jié)合我實(shí)際項(xiàng)目中的經(jīng)驗(yàn)帶你從零開始構(gòu)建一個功能完善且健壯的視頻播放模塊。2. 核心思路與方案選型為何選擇原生Video標(biāo)簽在決定技術(shù)方案前我們得先理清需求。如果你的項(xiàng)目需要類似B站、騰訊視頻那樣復(fù)雜的彈幕、清晰度無縫切換、高級DRM版權(quán)保護(hù)那么直接引入video.js、plyr或Chimeplayer等成熟播放器庫是更明智的選擇它們封裝了底層兼容性問題和大量高級API。然而在很多場景下需求可能很簡單后臺管理系統(tǒng)中預(yù)覽上傳的視頻。產(chǎn)品官網(wǎng)或宣傳頁上一個自動播放的背景視頻。需要深度自定義播放器UI且樣式要與品牌高度統(tǒng)一。對應(yīng)用打包體積極其敏感希望保持最小化。這時原生video標(biāo)簽的優(yōu)勢就凸顯出來了零依賴無需安裝任何額外NPM包直接由瀏覽器原生支持。極致輕量沒有額外的JS和CSS負(fù)擔(dān)加載速度最快。完全可控你可以通過JavaScript API控制播放器的每一個細(xì)節(jié)UI也可以完全自己繪制靈活性最高。學(xué)習(xí)成本低其核心API是Web標(biāo)準(zhǔn)一次學(xué)會到處可用。在Vue中使用它核心思路是利用Vue的響應(yīng)式系統(tǒng)來管理播放器的狀態(tài)如播放/暫停、當(dāng)前時間、音量等并通過Vue的模板和事件綁定來連接原生video元素的DOM API。我們將創(chuàng)建一個“Vue化”的視頻播放器組件它外表是Vue組件內(nèi)里是原生video的威力。2.1 基礎(chǔ)組件結(jié)構(gòu)設(shè)計我們先搭建一個最基礎(chǔ)的VideoPlayer.vue組件框架。這個組件將接收視頻源作為參數(shù)并提供一個基礎(chǔ)的控制界面。template div classvideo-player-container !-- 核心video元素使用ref以便在JS中直接操作DOM -- video refvideoRef :srcvideoSrc :posterposter classvideo-element timeupdatehandleTimeUpdate playhandlePlay pausehandlePause endedhandleEnded volumechangehandleVolumeChange loadedmetadatahandleLoadedMetadata 您的瀏覽器不支持 HTML5 video 標(biāo)簽。 /video !-- 自定義控制條 -- div v-ifshowControls classcustom-controls button clicktogglePlay {{ isPlaying ? 暫停 : 播放 }} /button span classtime-display {{ formatTime(currentTime) }} / {{ formatTime(duration) }} /span input typerange classprogress-bar min0 :maxduration :valuecurrentTime inputhandleSeek / button clicktoggleMute {{ isMuted ? 取消靜音 : 靜音 }} /button input typerange classvolume-bar min0 max1 step0.1 :valuevolume inputhandleVolumeChangeInput / button clicktoggleFullscreen全屏/button /div /div /template script setup import { ref, onMounted, onUnmounted } from vue; // Props定義組件接收的外部參數(shù) const props defineProps({ videoSrc: { type: String, required: true }, poster: { type: String, default: }, autoplay: { type: Boolean, default: false }, showControls: { type: Boolean, default: true } }); // 響應(yīng)式狀態(tài) const videoRef ref(null); // 指向video DOM元素的引用 const isPlaying ref(false); const currentTime ref(0); const duration ref(0); const volume ref(1); const isMuted ref(false); // 方法 const togglePlay () { const video videoRef.value; if (!video) return; if (video.paused) { video.play().catch(e { console.error(播放失敗:, e); // 處理自動播放被瀏覽器阻止的情況 }); } else { video.pause(); } }; const handleTimeUpdate (event) { currentTime.value event.target.currentTime; }; const handleSeek (event) { const video videoRef.value; if (!video || !duration.value) return; const seekTime parseFloat(event.target.value); video.currentTime seekTime; // 注意直接設(shè)置currentTime不會觸發(fā)timeupdate需要手動同步一次 currentTime.value seekTime; }; const toggleMute () { const video videoRef.value; if (!video) return; video.muted !video.muted; isMuted.value video.muted; if (!video.muted) { volume.value video.volume; } }; const handleVolumeChangeInput (event) { const video videoRef.value; if (!video) return; const newVolume parseFloat(event.target.value); video.volume newVolume; volume.value newVolume; isMuted.value newVolume 0; }; const toggleFullscreen async () { const container videoRef.value?.parentElement; if (!container) return; if (!document.fullscreenElement) { try { await container.requestFullscreen(); } catch (err) { console.error(全屏請求失敗:, err); } } else { try { await document.exitFullscreen(); } catch (err) { console.error(退出全屏失敗:, err); } } }; const handleLoadedMetadata (event) { const video event.target; duration.value video.duration; // 如果設(shè)置autoplay在此處嘗試播放更可靠 if (props.autoplay) { video.play().catch(e console.warn(自動播放被阻止:, e)); } }; const formatTime (timeInSeconds) { if (!isFinite(timeInSeconds)) return 00:00; const minutes Math.floor(timeInSeconds / 60); const seconds Math.floor(timeInSeconds % 60); return ${minutes.toString().padStart(2, 0)}:${seconds.toString().padStart(2, 0)}; }; // 生命周期 onMounted(() { const video videoRef.value; if (!video) return; // 初始化音量狀態(tài) volume.value video.volume; isMuted.value video.muted; // 監(jiān)聽全屏變化 document.addEventListener(fullscreenchange, handleFullscreenChange); }); onUnmounted(() { document.removeEventListener(fullscreenchange, handleFullscreenChange); }); const handleFullscreenChange () { // 可以在這里更新全屏相關(guān)的UI狀態(tài) console.log(全屏狀態(tài)變化:, !!document.fullscreenElement); }; /script style scoped .video-player-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; background-color: #000; } .video-element { width: 100%; height: auto; display: block; } .custom-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: white; padding: 10px; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease; } .video-player-container:hover .custom-controls { opacity: 1; } .progress-bar, .volume-bar { flex-grow: 1; height: 4px; cursor: pointer; } .time-display { font-size: 0.9em; font-family: monospace; } /style這個基礎(chǔ)組件已經(jīng)實(shí)現(xiàn)了播放、暫停、進(jìn)度條拖拽、音量控制、靜音、全屏和時間顯示等核心功能。它展示了Vue響應(yīng)式數(shù)據(jù)isPlaying,currentTime等與videoDOM元素屬性/事件雙向綁定的基本模式。注意這里使用了Vue 3的script setup語法它更簡潔。如果你使用的是Vue 2或Options API思路完全一樣只是寫法上需要將響應(yīng)式數(shù)據(jù)定義在data()中方法定義在methods里。3. 核心功能深度解析與實(shí)現(xiàn)細(xì)節(jié)有了基礎(chǔ)框架我們來深入探討幾個關(guān)鍵功能的實(shí)現(xiàn)細(xì)節(jié)、可能遇到的問題以及優(yōu)化方案。3.1 播放控制與狀態(tài)同步的陷阱播放/暫停的邏輯看起來簡單但有幾個細(xì)節(jié)容易出錯1. 自動播放策略Autoplay Policy現(xiàn)代瀏覽器尤其是Chrome對自動播放有嚴(yán)格限制。通常只有滿足以下條件之一video.play()才能不經(jīng)用戶交互就成功視頻被設(shè)置為靜音muted。用戶之前與網(wǎng)站有過交互如點(diǎn)擊、觸摸。// 不安全的做法很可能失敗 onMounted(() { if (props.autoplay) { videoRef.value.play(); // 可能拋出 NotAllowedError } }); // 更穩(wěn)健的做法 const attemptAutoplay () { const video videoRef.value; if (!video || !props.autoplay) return; const playPromise video.play(); if (playPromise ! undefined) { playPromise.catch(error { // 自動播放失敗通常是因?yàn)椴呗韵拗?console.warn(自動播放被阻止:, error.name); // 可以在這里提供一個“點(diǎn)擊播放”的提示按鈕 showPlayButton.value true; }); } }; // 在元數(shù)據(jù)加載后嘗試此時video已就緒 const handleLoadedMetadata () { // ... 其他邏輯 attemptAutoplay(); };2. 播放狀態(tài)同步isPlaying狀態(tài)不應(yīng)該通過猜測來更新而應(yīng)該嚴(yán)格跟隨video元素的事件。play事件觸發(fā)時設(shè)置isPlaying true。pause事件觸發(fā)時設(shè)置isPlaying false。ended事件觸發(fā)時視頻播放完畢也應(yīng)設(shè)置isPlaying false。3. 進(jìn)度條拖拽的體驗(yàn)優(yōu)化上面的基礎(chǔ)實(shí)現(xiàn)中拖拽進(jìn)度條是通過input事件實(shí)時設(shè)置video.currentTime。這在桌面端沒問題但在移動端或性能較差的設(shè)備上頻繁設(shè)置可能導(dǎo)致卡頓。一個常見的優(yōu)化是使用change事件代替input只在用戶釋放滑塊時才跳轉(zhuǎn)時間?；蛘呖梢砸胍粋€“ seeking ”中間狀態(tài)在拖拽過程中只更新一個預(yù)覽時間顯示釋放后再真正跳轉(zhuǎn)。3.2 支持多種視頻源與流媒體如M3U8video標(biāo)簽的src屬性可以直接指向.mp4、.webm等文件。但對于熱詞中提到的M3U8HLS流或MPEG-DASH等自適應(yīng)流媒體格式瀏覽器原生支持有限。Safari和部分移動端瀏覽器原生支持 HLS.m3u8。Chrome, Firefox, Edge等通常不支持原生播放.m3u8。為了跨瀏覽器支持HLS我們需要引入一個解碼庫最常用的是hls.js。它的工作原理是如果瀏覽器原生支持HLS就優(yōu)先使用原生能力如果不支持則用hls.js將TS流片段在JavaScript層進(jìn)行解封裝和播放。集成 hls.js 到 Vue 組件安裝依賴npm install hls.js修改組件邏輯script setup import { ref, onMounted, onUnmounted, watch } from vue; import Hls from hls.js; // 引入hls.js const props defineProps({ videoSrc: String, // ... 其他props }); const videoRef ref(null); let hls null; // Hls實(shí)例 const initVideo () { const video videoRef.value; if (!video || !props.videoSrc) return; // 判斷是否為HLS流 if (props.videoSrc.indexOf(.m3u8) -1) { // 使用hls.js if (Hls.isSupported()) { // 銷毀舊的Hls實(shí)例 if (hls) { hls.destroy(); } hls new Hls({ enableWorker: true, // 使用Web Worker提升性能 // ... 其他配置 }); hls.loadSource(props.videoSrc); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () { // 視頻元數(shù)據(jù)解析完成可以嘗試自動播放 if (props.autoplay) { video.play().catch(e console.warn(e)); } }); hls.on(Hls.Events.ERROR, (event, data) { // 處理錯誤如網(wǎng)絡(luò)錯誤、解碼錯誤等 console.error(HLS錯誤:, data.type, data.details); if (data.fatal) { switch(data.type) { case Hls.ErrorTypes.NETWORK_ERROR: // 嘗試重新加載 hls.startLoad(); break; case Hls.ErrorTypes.MEDIA_ERROR: hls.recoverMediaError(); break; default: // 無法恢復(fù)銷毀實(shí)例 hls.destroy(); break; } } }); } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // 瀏覽器原生支持HLS如Safari video.src props.videoSrc; } else { console.error(當(dāng)前瀏覽器不支持HLS播放); } } else { // 普通視頻文件 video.src props.videoSrc; } }; // 監(jiān)聽videoSrc變化切換視頻源 watch(() props.videoSrc, () { initVideo(); }); onMounted(() { initVideo(); }); onUnmounted(() { // 組件銷毀時清理Hls實(shí)例 if (hls) { hls.destroy(); } }); /script實(shí)操心得使用hls.js時務(wù)必在組件銷毀onUnmounted或視頻源切換前調(diào)用hls.destroy()來釋放內(nèi)存和斷開網(wǎng)絡(luò)連接否則可能導(dǎo)致內(nèi)存泄漏。對于MPEG-DASH流可以使用dash.js庫集成方式類似。3.3 自定義播放器UI與高級交互原生的瀏覽器控制條 (controls屬性) 樣式難以定制。我們自建控制條就有了無限的定制可能。1. 虛擬進(jìn)度條緩沖與播放一個專業(yè)的進(jìn)度條會顯示兩種狀態(tài)已緩沖的進(jìn)度和當(dāng)前播放的進(jìn)度。我們可以通過監(jiān)聽video的progress事件來獲取緩沖范圍。const bufferedRanges ref([]); const handleProgress (event) { const video event.target; const ranges []; for (let i 0; i video.buffered.length; i) { ranges.push({ start: video.buffered.start(i), end: video.buffered.end(i) }); } bufferedRanges.value ranges; }; // 在模板中你可以根據(jù)bufferedRanges和currentTime來繪制兩個不同顏色的進(jìn)度條背景。2. 快捷鍵支持為播放器添加鍵盤快捷鍵如空格鍵播放/暫停左右鍵快進(jìn)/快退能極大提升用戶體驗(yàn)。我們需要在組件掛載時監(jiān)聽全局鍵盤事件并在銷毀時移除。import { onMounted, onUnmounted } from vue; const handleKeyDown (event) { // 確保焦點(diǎn)不在輸入框等元素上 if (event.target.tagName INPUT || event.target.tagName TEXTAREA) { return; } const video videoRef.value; if (!video) return; switch(event.code) { case Space: event.preventDefault(); // 防止頁面滾動 togglePlay(); break; case ArrowLeft: event.preventDefault(); video.currentTime Math.max(0, video.currentTime - 10); // 快退10秒 break; case ArrowRight: event.preventDefault(); video.currentTime Math.min(video.duration, video.currentTime 10); // 快進(jìn)10秒 break; case KeyM: toggleMute(); break; case KeyF: toggleFullscreen(); break; } }; onMounted(() { window.addEventListener(keydown, handleKeyDown); }); onUnmounted(() { window.removeEventListener(keydown, handleKeyDown); });3. 畫中畫Picture-in-Picture模式現(xiàn)代瀏覽器支持畫中畫API允許視頻懸浮在其他窗口之上。const togglePictureInPicture async () { const video videoRef.value; if (!video) return; try { if (video ! document.pictureInPictureElement) { await video.requestPictureInPicture(); } else { await document.exitPictureInPicture(); } } catch (error) { console.error(畫中畫模式切換失敗:, error); } }; // 注意需要檢查瀏覽器支持情況 document.pictureInPictureEnabled4. 性能優(yōu)化與兼容性實(shí)戰(zhàn)視頻播放是資源密集型操作性能優(yōu)化至關(guān)重要。4.1 懶加載與預(yù)加載策略懶加載Lazy Loading對于頁面下方或非首屏的視頻可以設(shè)置video preloadnone并監(jiān)聽視口交叉Intersection Observer事件當(dāng)視頻進(jìn)入視口時再設(shè)置src進(jìn)行加載。import { ref, onMounted } from vue; const videoRef ref(null); const isInViewport ref(false); onMounted(() { const observer new IntersectionObserver((entries) { entries.forEach(entry { isInViewport.value entry.isIntersecting; if (entry.isIntersecting) { // 開始加載視頻 const video videoRef.value; if (video video.getAttribute(data-src)) { video.src video.getAttribute(data-src); video.removeAttribute(data-src); } observer.unobserve(entry.target); // 加載后停止觀察 } }); }, { threshold: 0.1 }); // 當(dāng)10%的視口可見時觸發(fā) if (videoRef.value) { observer.observe(videoRef.value); } });在模板中video :data-srcvideoSrc preloadnone ...預(yù)加載Preload對于重要的主視頻可以設(shè)置preloadmetadata只加載元數(shù)據(jù)如時長、第一幀或preloadauto由瀏覽器決定。通常preloadmetadata是平衡體驗(yàn)和流量的好選擇。4.2 內(nèi)存管理與事件清理這是一個極易被忽視但會導(dǎo)致嚴(yán)重問題的點(diǎn)。單頁面應(yīng)用SPA中視頻組件可能被頻繁創(chuàng)建和銷毀。銷毀Hls/Dash實(shí)例如前所述必須在onUnmounted中銷毀流媒體實(shí)例。清除事件監(jiān)聽器除了我們手動添加的全局事件如鍵盤事件、全屏事件一些第三方庫也可能添加了監(jiān)聽器確保在銷毀時清理。斷開視頻源在組件銷毀前將video.src 或video.srcObject null并調(diào)用video.load()。這可以提示瀏覽器回收視頻解碼資源。onUnmounted(() { const video videoRef.value; if (video) { video.src ; video.load(); } // ... 清理其他監(jiān)聽器和實(shí)例 });4.3 跨瀏覽器兼容性處理不同瀏覽器對video標(biāo)簽的行為和樣式有細(xì)微差別。全屏API差異早期瀏覽器使用帶前綴的API如webkitRequestFullscreen。我們上面的示例使用了標(biāo)準(zhǔn)的requestFullscreen()但為了兼容舊版可能需要做特性檢測。const requestFullscreen (element) { const methods [ requestFullscreen, webkitRequestFullscreen, mozRequestFullScreen, msRequestFullscreen ]; for (const method of methods) { if (element[method]) { return element[method](); } } return Promise.reject(new Error(全屏API不支持)); };控制條樣式即使我們隱藏了原生控制條 (controls屬性)在某些瀏覽器如iOS Safari上視頻播放時仍可能顯示一些系統(tǒng)級的疊加層。這通常無法完全去除屬于平臺特性。播放事件順序不同瀏覽器觸發(fā)play,playing,canplay等事件的時機(jī)可能有微小差異。如果你的邏輯嚴(yán)重依賴某個事件的精確觸發(fā)時機(jī)需要進(jìn)行測試。5. 常見問題排查與實(shí)戰(zhàn)技巧這里記錄了一些我在項(xiàng)目中實(shí)際踩過的“坑”和解決方案。5.1 問題速查表問題現(xiàn)象可能原因排查步驟與解決方案視頻能加載但無法播放控制臺無報錯1. 自動播放策略阻止。2. 視頻編碼瀏覽器不支持。3. CORS問題尤其是跨域視頻。1. 檢查video.play()返回的Promise是否被拒絕。添加用戶交互后播放。2. 使用video.canPlayType(video/mp4; codecsavc1.42E01E)檢測編碼支持。統(tǒng)一轉(zhuǎn)換為廣泛支持的H.264/AAC編碼的MP4。3. 檢查網(wǎng)絡(luò)面板確認(rèn)視頻資源返回的響應(yīng)頭包含Access-Control-Allow-Origin: *或你的域名。服務(wù)端需配置CORS。移動端點(diǎn)擊播放后視頻聲音播放但畫面黑屏/靜止常見于iOS Safari。可能是視頻第一幀未正確解碼或播放觸發(fā)了瀏覽器的“低功耗模式”。1. 確保視頻首幀是關(guān)鍵幀I幀。2. 嘗試為video標(biāo)簽添加playsinline屬性防止iOS全屏播放video playsinline ...。3. 在play()調(diào)用后短暫延遲再嘗試設(shè)置currentTime 0強(qiáng)制重繪。進(jìn)度條拖拽后音畫不同步或跳轉(zhuǎn)不準(zhǔn)1. 關(guān)鍵幀間隔太長。2. 使用input事件過于頻繁性能跟不上。3. HLS/DASH流跳轉(zhuǎn)到了非關(guān)鍵幀。1. 重新壓制視頻減少關(guān)鍵幀間隔如2秒一個GOP。2. 改用change事件或?qū)nput進(jìn)行節(jié)流throttle。3. 對于流媒體跳轉(zhuǎn)是播放器的標(biāo)準(zhǔn)行為通常會自動定位到最近的關(guān)鍵幀。視頻播放卡頓尤其是高清視頻1. 網(wǎng)絡(luò)帶寬不足。2. 設(shè)備解碼性能不足。3. 瀏覽器同時解碼多個視頻。1. 提供多碼率自適應(yīng)流HLS/DASH。2. 監(jiān)聽video的waiting事件顯示“加載中”監(jiān)聽playing事件隱藏。3. 非當(dāng)前頁面的視頻務(wù)必暫停 (video.pause()) 并置空src。HLS.m3u8在Chrome/Firefox無法播放瀏覽器原生不支持HLS。引入hls.js庫并按照3.2節(jié)的方式集成。確保.m3u8索引文件和.ts分片文件均可訪問且CORS配置正確。自定義控制條在移動端點(diǎn)擊不靈敏移動端瀏覽器有300ms的點(diǎn)擊延遲為了區(qū)分單擊和雙擊。1. 使用click事件并考慮引入fastclick庫或使用touch事件模擬。2. 更簡單的方法為控制條按鈕添加CSS樣式touch-action: manipulation;這可以告訴瀏覽器此元素用于點(diǎn)擊操作可以消除延遲。全屏模式下自定義控制條不顯示或位置錯誤全屏API在全屏?xí)r樣式作用域可能發(fā)生變化。1. 使用:fullscreenCSS偽類注意瀏覽器前綴來為全屏狀態(tài)下的控制條單獨(dú)定義樣式。2. 確?？刂茥l容器的定位是相對于video-player-container而不是video元素本身。5.2 獨(dú)家避坑技巧“靜音自動播放”策略的妙用如果你的背景視頻需要自動播放但又不想打擾用戶可以設(shè)置muted和autoplay并提供一個清晰的“開啟聲音”按鈕。這是符合瀏覽器策略且用戶體驗(yàn)良好的模式。使用currentTime進(jìn)行精準(zhǔn)定位時直接設(shè)置video.currentTime是一個異步操作。如果你需要在其后立即執(zhí)行另一個依賴新時間的操作如截圖最好監(jiān)聽seeked事件。const jumpToTime (time) { const video videoRef.value; video.currentTime time; // 不要在這里直接截圖時間可能還沒跳轉(zhuǎn)到位 }; const handleSeeked () { console.log(跳轉(zhuǎn)完成當(dāng)前時間是:, videoRef.value.currentTime); // 現(xiàn)在可以安全地截圖了 };監(jiān)聽video元素的resize事件當(dāng)視頻尺寸因容器變化或全屏而變化時你可能需要調(diào)整UI布局。可以監(jiān)聽video的resize事件注意兼容性或使用ResizeObserverAPI。處理“播放失敗”的降級方案如果所有播放方式都失敗了如格式不支持、網(wǎng)絡(luò)錯誤應(yīng)該有一個友好的降級UI比如顯示視頻封面圖和一個下載鏈接而不是一個破碎的圖標(biāo)。最后封裝這樣一個視頻播放組件雖然初期投入比直接用第三方庫大但它帶來的靈活性、可控性和體積優(yōu)勢是巨大的。尤其是在需要高度定制化播放體驗(yàn)的項(xiàng)目中這套基于原生video標(biāo)簽和Vue的解決方案能讓你擁有完全的掌控力。在實(shí)際開發(fā)中你可以根據(jù)項(xiàng)目的復(fù)雜程度逐步將上述功能模塊化例如將控制條、進(jìn)度條、音量組件拆分為獨(dú)立的子組件使代碼更易維護(hù)。