戰(zhàn)：免費(fèi)接入 VAST 廣告的 HTML5 視頻播放器一小時(shí)搞定)
Fluid Player 實(shí)戰(zhàn)免費(fèi)接入 VAST 廣告的 HTML5 視頻播放器一小時(shí)搞定【免費(fèi)下載鏈接】fluid-playerFluid Player - an open source VAST compliant HTML5 video player項(xiàng)目地址: https://gitcode.com/gh_mirrors/fl/fluid-player廣告方甩來(lái)一個(gè) VAST 標(biāo)簽、要求你的視頻頁(yè)加上前貼片廣告時(shí)你才發(fā)現(xiàn)頁(yè)面上那個(gè)video標(biāo)簽只是個(gè)半成品。Fluid Player 就是干這個(gè)的——免費(fèi)開(kāi)源的 HTML5 視頻播放器把video變成帶完整控制欄、多清晰度切換、HLS/DASH 流媒體和 VAST 4.0 廣告能力的成品播放器。 第一步十分鐘跑通最小示例先不碰廣告讓播放器轉(zhuǎn)起來(lái)。下面是夠用的最小結(jié)構(gòu)video idplayer source srcmovie.mp4 typevideo/mp4 /video script srcdist/fluidplayer.min.js/script script var player fluidPlayer(player, { layoutControls: { posterImage: poster.jpg } }); /script這段在干嘛fluidPlayer接收視頻元素的 id或元素本身返回播放器實(shí)例posterImage只是加一張封面刪掉這行照樣能跑。所有能力都是往第二個(gè)參數(shù)里塞配置對(duì)象。 第二步四種播放場(chǎng)景各配各的本地視頻與多清晰度同一個(gè)視頻準(zhǔn)備幾個(gè)碼率寫(xiě)在video里就是video idplayer source srcmovie-1080p.mp4>var player fluidPlayer(player, { vastOptions: { adList: [ { roll: preRoll, vastTag: https://example.com/pre.vast }, { roll: midRoll, timer: 30%, vastTag: https://example.com/mid.vast }, { roll: postRoll, vastTag: https://example.com/post.vast } ], allowVPAID: true } });preRoll片頭、midRoll中插、postRoll片尾中插必須配timer告訴播放器什么時(shí)候插秒數(shù)或百分比都行。allowVPAID默認(rèn)是關(guān)的要跑 VPAID 創(chuàng)意必須顯式打開(kāi)。廣告加載失敗時(shí)播放器會(huì)把進(jìn)度條上的廣告標(biāo)記markers和跳過(guò)按鈕一起接管廣告商只負(fù)責(zé)給 VAST交互不用你操心。片尾推薦視頻Suggested Videos視頻播完別讓用戶走掛一個(gè)推薦列表。推薦內(nèi)容由一個(gè) JSON 配置驅(qū)動(dòng)只填一個(gè) URLvar player fluidPlayer(player, { suggestedVideos: { configUrl: suggested_videos.json } });JSON 里每項(xiàng)帶標(biāo)題、封面和各自的播放源點(diǎn)擊某格會(huì)直接把新視頻灌進(jìn)同一個(gè)播放器實(shí)例繼續(xù)播。? 第三步調(diào)參速查布局和控制欄常用項(xiàng)配置項(xiàng)類型默認(rèn)值一句話說(shuō)明layoutControls.posterImagestring無(wú)播放前的封面圖layoutControls.autoPlaybooleanfalse自動(dòng)播放瀏覽器策略下一般需靜音layoutControls.controlBar.autoHidebooleanfalse控制欄無(wú)操作后自動(dòng)隱藏layoutControls.controlBar.autoHideTimeoutnumber3隱藏前等待秒數(shù)layoutControls.controlBar.animatedbooleantrue控制欄顯隱是否帶動(dòng)畫(huà)layoutControls.subtitlesEnabledbooleanfalse顯示字幕按鈕配 VTT 源layoutControls.playbackRateEnabledbooleanfalse顯示倍速菜單廣告相關(guān)常用項(xiàng)配置項(xiàng)類型默認(rèn)值一句話說(shuō)明vastOptions.adListarray[]廣告列表每條一個(gè) VAST 來(lái)源adList[].rollstring必填preRoll / midRoll / postRoll / onPauseRolladList[].timernumber|stringmidRoll 必填中插觸發(fā)點(diǎn)秒數(shù)或百分比字符串a(chǎn)dList[].fallbackVastTagsarray[]主標(biāo)簽失敗后的瀑布流備用 VASTvastOptions.allowVPAIDbooleanfalse是否放行 VPAID 廣告vastOptions.skipButtonCaptionstringSkip Ad跳過(guò)按鈕文案vastOptions.vastTimeoutnumber—VAST 請(qǐng)求超時(shí)時(shí)間完整類型定義都寫(xiě)在 src/index.d.ts 里找不到某個(gè)開(kāi)關(guān)時(shí)直接查它最快。 第四步踩坑與自救現(xiàn)象VPAID 廣告完全不出現(xiàn)。原因allowVPAID默認(rèn)是false播放器出于安全考慮不放行 VPAID 腳本。 解法在vastOptions里顯式設(shè)allowVPAID: true再確認(rèn)廣告商給的確實(shí)是 VPAID 創(chuàng)意而非普通 VAST。現(xiàn)象midRoll 設(shè)了廣告但永遠(yuǎn)不插。原因中插必須帶timer缺了它播放器不知道觸發(fā)時(shí)機(jī)。 解法補(bǔ)上timer支持秒數(shù)如30或百分比如50%長(zhǎng)視頻建議用百分比?，F(xiàn)象主廣告源經(jīng)常超時(shí)播放器直接干等。原因只給了一個(gè)vastTag請(qǐng)求失敗就沒(méi)有后手。 解法給同一條廣告加fallbackVastTags數(shù)組播放器按順序逐個(gè)請(qǐng)求直到拿到能出廣告的那個(gè)——這就是倉(cāng)庫(kù)測(cè)試用例里反復(fù)覆蓋的瀑布流場(chǎng)景?，F(xiàn)象頁(yè)面看起來(lái)糙——控制欄一直杵著、視頻上下留黑邊。原因autoHide默認(rèn)關(guān)閉fillToContainer等布局項(xiàng)用的是默認(rèn)值。 解法打開(kāi)controlBar.autoHide并調(diào)短超時(shí)視頻鋪不滿容器時(shí)檢查fillToContainer與封面尺寸posterImageSizecover/contain?，F(xiàn)象運(yùn)行時(shí)切換 HLS 源后播放進(jìn)度被重置iOS 尤其明顯。原因這是項(xiàng)目已知的問(wèn)題類型倉(cāng)庫(kù) special-cases 目錄里有對(duì)應(yīng)復(fù)現(xiàn)頁(yè)。 解法暫時(shí)避開(kāi)頻繁動(dòng)態(tài)換源把多清晰度寫(xiě)進(jìn)初始source列表讓播放器內(nèi)部管理切換。生產(chǎn)環(huán)境組合拳真實(shí)業(yè)務(wù)里這些配置是疊在一起用的一份完整長(zhǎng)這樣fluidPlayer(player, { layoutControls: { posterImage: poster.jpg, controlBar: { autoHide: true, autoHideTimeout: 3 } }, vastOptions: { adList: [ { roll: preRoll, vastTag: pre.vast, fallbackVastTags: [fallback1.vast] } ], allowVPAID: true }, suggestedVideos: { configUrl: suggested.json } });上生產(chǎn)前建議照著 test/html/ 目錄里的hls_vod_vast、suggested_videos等現(xiàn)成頁(yè)面逐項(xiàng)核對(duì)自己的配置廣告和推薦列表各走一遍完整流程?；氐介_(kāi)頭那個(gè) VAST 需求現(xiàn)在廣告方再來(lái)要貼片你只需要在adList里多填一行。下一步動(dòng)作就一個(gè)——把 test/html/ 下對(duì)應(yīng)你業(yè)務(wù)場(chǎng)景的示例頁(yè)在本地跑起來(lái)對(duì)著抄。【免費(fèi)下載鏈接】fluid-playerFluid Player - an open source VAST compliant HTML5 video player項(xiàng)目地址: https://gitcode.com/gh_mirrors/fl/fluid-player創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Fluid Player 實(shí)戰(zhàn)：免費(fèi)接入 VAST 廣告的 HTML5 視頻播放器一小時(shí)搞定
Fluid Player 實(shí)戰(zhàn)免費(fèi)接入 VAST 廣告的 HTML5 視頻播放器一小時(shí)搞定【免費(fèi)下載鏈接】fluid-playerFluid Player - an open source VAST compliant HTML5 video player項(xiàng)目地址: https://gitcode.com/gh_mirrors/fl/fluid-player廣告方甩來(lái)一個(gè) VAST 標(biāo)簽、要求你的視頻頁(yè)加上前貼片廣告時(shí)你才發(fā)現(xiàn)頁(yè)面上那個(gè)video標(biāo)簽只是個(gè)半成品。Fluid Player 就是干這個(gè)的——免費(fèi)開(kāi)源的 HTML5 視頻播放器把video變成帶完整控制欄、多清晰度切換、HLS/DASH 流媒體和 VAST 4.0 廣告能力的成品播放器。 第一步十分鐘跑通最小示例先不碰廣告讓播放器轉(zhuǎn)起來(lái)。下面是夠用的最小結(jié)構(gòu)video idplayer source srcmovie.mp4 typevideo/mp4 /video script srcdist/fluidplayer.min.js/script script var player fluidPlayer(player, { layoutControls: { posterImage: poster.jpg } }); /script這段在干嘛fluidPlayer接收視頻元素的 id或元素本身返回播放器實(shí)例posterImage只是加一張封面刪掉這行照樣能跑。所有能力都是往第二個(gè)參數(shù)里塞配置對(duì)象。 第二步四種播放場(chǎng)景各配各的本地視頻與多清晰度同一個(gè)視頻準(zhǔn)備幾個(gè)碼率寫(xiě)在video里就是video idplayer source srcmovie-1080p.mp4>var player fluidPlayer(player, { vastOptions: { adList: [ { roll: preRoll, vastTag: https://example.com/pre.vast }, { roll: midRoll, timer: 30%, vastTag: https://example.com/mid.vast }, { roll: postRoll, vastTag: https://example.com/post.vast } ], allowVPAID: true } });preRoll片頭、midRoll中插、postRoll片尾中插必須配timer告訴播放器什么時(shí)候插秒數(shù)或百分比都行。allowVPAID默認(rèn)是關(guān)的要跑 VPAID 創(chuàng)意必須顯式打開(kāi)。廣告加載失敗時(shí)播放器會(huì)把進(jìn)度條上的廣告標(biāo)記markers和跳過(guò)按鈕一起接管廣告商只負(fù)責(zé)給 VAST交互不用你操心。片尾推薦視頻Suggested Videos視頻播完別讓用戶走掛一個(gè)推薦列表。推薦內(nèi)容由一個(gè) JSON 配置驅(qū)動(dòng)只填一個(gè) URLvar player fluidPlayer(player, { suggestedVideos: { configUrl: suggested_videos.json } });JSON 里每項(xiàng)帶標(biāo)題、封面和各自的播放源點(diǎn)擊某格會(huì)直接把新視頻灌進(jìn)同一個(gè)播放器實(shí)例繼續(xù)播。? 第三步調(diào)參速查布局和控制欄常用項(xiàng)配置項(xiàng)類型默認(rèn)值一句話說(shuō)明layoutControls.posterImagestring無(wú)播放前的封面圖layoutControls.autoPlaybooleanfalse自動(dòng)播放瀏覽器策略下一般需靜音layoutControls.controlBar.autoHidebooleanfalse控制欄無(wú)操作后自動(dòng)隱藏layoutControls.controlBar.autoHideTimeoutnumber3隱藏前等待秒數(shù)layoutControls.controlBar.animatedbooleantrue控制欄顯隱是否帶動(dòng)畫(huà)layoutControls.subtitlesEnabledbooleanfalse顯示字幕按鈕配 VTT 源layoutControls.playbackRateEnabledbooleanfalse顯示倍速菜單廣告相關(guān)常用項(xiàng)配置項(xiàng)類型默認(rèn)值一句話說(shuō)明vastOptions.adListarray[]廣告列表每條一個(gè) VAST 來(lái)源adList[].rollstring必填preRoll / midRoll / postRoll / onPauseRolladList[].timernumber|stringmidRoll 必填中插觸發(fā)點(diǎn)秒數(shù)或百分比字符串a(chǎn)dList[].fallbackVastTagsarray[]主標(biāo)簽失敗后的瀑布流備用 VASTvastOptions.allowVPAIDbooleanfalse是否放行 VPAID 廣告vastOptions.skipButtonCaptionstringSkip Ad跳過(guò)按鈕文案vastOptions.vastTimeoutnumber—VAST 請(qǐng)求超時(shí)時(shí)間完整類型定義都寫(xiě)在 src/index.d.ts 里找不到某個(gè)開(kāi)關(guān)時(shí)直接查它最快。 第四步踩坑與自救現(xiàn)象VPAID 廣告完全不出現(xiàn)。原因allowVPAID默認(rèn)是false播放器出于安全考慮不放行 VPAID 腳本。 解法在vastOptions里顯式設(shè)allowVPAID: true再確認(rèn)廣告商給的確實(shí)是 VPAID 創(chuàng)意而非普通 VAST。現(xiàn)象midRoll 設(shè)了廣告但永遠(yuǎn)不插。原因中插必須帶timer缺了它播放器不知道觸發(fā)時(shí)機(jī)。 解法補(bǔ)上timer支持秒數(shù)如30或百分比如50%長(zhǎng)視頻建議用百分比?，F(xiàn)象主廣告源經(jīng)常超時(shí)播放器直接干等。原因只給了一個(gè)vastTag請(qǐng)求失敗就沒(méi)有后手。 解法給同一條廣告加fallbackVastTags數(shù)組播放器按順序逐個(gè)請(qǐng)求直到拿到能出廣告的那個(gè)——這就是倉(cāng)庫(kù)測(cè)試用例里反復(fù)覆蓋的瀑布流場(chǎng)景?，F(xiàn)象頁(yè)面看起來(lái)糙——控制欄一直杵著、視頻上下留黑邊。原因autoHide默認(rèn)關(guān)閉fillToContainer等布局項(xiàng)用的是默認(rèn)值。 解法打開(kāi)controlBar.autoHide并調(diào)短超時(shí)視頻鋪不滿容器時(shí)檢查fillToContainer與封面尺寸posterImageSizecover/contain?，F(xiàn)象運(yùn)行時(shí)切換 HLS 源后播放進(jìn)度被重置iOS 尤其明顯。原因這是項(xiàng)目已知的問(wèn)題類型倉(cāng)庫(kù) special-cases 目錄里有對(duì)應(yīng)復(fù)現(xiàn)頁(yè)。 解法暫時(shí)避開(kāi)頻繁動(dòng)態(tài)換源把多清晰度寫(xiě)進(jìn)初始source列表讓播放器內(nèi)部管理切換。生產(chǎn)環(huán)境組合拳真實(shí)業(yè)務(wù)里這些配置是疊在一起用的一份完整長(zhǎng)這樣fluidPlayer(player, { layoutControls: { posterImage: poster.jpg, controlBar: { autoHide: true, autoHideTimeout: 3 } }, vastOptions: { adList: [ { roll: preRoll, vastTag: pre.vast, fallbackVastTags: [fallback1.vast] } ], allowVPAID: true }, suggestedVideos: { configUrl: suggested.json } });上生產(chǎn)前建議照著 test/html/ 目錄里的hls_vod_vast、suggested_videos等現(xiàn)成頁(yè)面逐項(xiàng)核對(duì)自己的配置廣告和推薦列表各走一遍完整流程?；氐介_(kāi)頭那個(gè) VAST 需求現(xiàn)在廣告方再來(lái)要貼片你只需要在adList里多填一行。下一步動(dòng)作就一個(gè)——把 test/html/ 下對(duì)應(yīng)你業(yè)務(wù)場(chǎng)景的示例頁(yè)在本地跑起來(lái)對(duì)著抄。【免費(fèi)下載鏈接】fluid-playerFluid Player - an open source VAST compliant HTML5 video player項(xiàng)目地址: https://gitcode.com/gh_mirrors/fl/fluid-player創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考