一、實驗目的掌握小程序video視頻組件常用屬性實現(xiàn)視頻播放。理解彈幕機制學會配置預設(shè)彈幕列表danmuList。掌握wx.createSelectorQuery()獲取VideoContext視頻上下文調(diào)用sendDanmu()發(fā)送實時彈幕。實現(xiàn)隨機十六進制顏色函數(shù)讓發(fā)送的彈幕顏色隨機變化。了解小程序基礎(chǔ)庫版本差異danmu?btn彈幕開關(guān)按鈕僅低版本基礎(chǔ)庫生效高版本該屬性失效。掌握 input 輸入框bind:blur失去焦點事件獲取用戶輸入內(nèi)容。二、實驗環(huán)境開發(fā)工具微信開發(fā)者工具項目模式不使用云服務、不使用模板渲染引擎renderer:webviewwebview 渲染模式三、實驗需求分析基礎(chǔ)功能頁面展示 video 視頻播放器視頻播放到指定時間自動播放預設(shè)彈幕。提供輸入框用戶輸入文字點擊按鈕發(fā)送彈幕彈幕顏色隨機生成。頁面包含橙色外邊框紅色頁面標題原生導航欄標題為 video 組件。作業(yè)擴充要求切換低版本調(diào)試基礎(chǔ)庫播放器顯示彈幕開關(guān)按鈕。切換高版本調(diào)試基礎(chǔ)庫彈幕開關(guān)按鈕消失彈幕發(fā)送功能仍然正?？捎?。四、核心知識點梳理1.video 組件核心屬性表格屬性說明id組件標識用于獲取視頻上下文src視頻資源地址必須為 https 網(wǎng)絡地址或者云文件 ID不能使用本地項目內(nèi) mp4 文件controlstrue顯示播放控件播放、進度條、全屏danmu?list預設(shè)彈幕數(shù)組每個彈幕對象包含text彈幕文字、color彈幕顏色、time彈幕出現(xiàn)時間單位秒enable?danmutrue開啟彈幕總開關(guān)必須開啟彈幕才會顯示danmu?btntrue彈幕開關(guān)按鈕僅低基礎(chǔ)庫版本生效高版本廢棄該屬性2.VideoContext 視頻上下文通過wx.createSelectorQuery()查詢獲取 video 組件上下文對象調(diào)用sendDanmu({text,color})接口實現(xiàn)向視頻發(fā)送實時彈幕。3. 隨機十六進制顏色利用Math.random()生成 0?255 的數(shù)字使用toString(16)轉(zhuǎn)為十六進制如果是單字符前面補0拼接成#RRGGBB標準顏色格式。4.input bind:blur 事件輸入框失去焦點才捕獲輸入內(nèi)容保存文本用于后續(xù)發(fā)送彈幕。5. 視頻資源注意事項?禁止直接把 mp4 視頻放在小程序項目文件夾模擬器可以播放真機直接黑屏。 ?方案 1云開發(fā)存儲上傳視頻復制云文件 ID?方案 2外網(wǎng) HTTPS 視頻鏈接。五、完整代碼實現(xiàn)1.app.json全局配置原生導航欄{ pages: [ pages/index/index ], window: { navigationBarTitleText: video組件, navigationBarTextStyle: black, navigationBarBackgroundColor: #ffffff }, style: v2, renderer: webview, componentFramework: glass?easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2.pages/index/index.wxmlscroll-view classscrollarea scroll-y typelist view classbox view classtitle華為開發(fā)者大會?2026/view view classvideo-layout video idmy?video src{{videoPath}} controlstrue danmu?list{{danmuList}} enable?danmutrue/video /view view classtxt?style彈幕內(nèi)容/view input typetext placeholder在此處輸入彈幕內(nèi)容 bind:blurinputBlur/ button typeprimary bind:tapsendDanmu發(fā)送彈幕/button /view /scroll-view3.pages/index/index.js// 獲取隨機十六進制顏色 function getRandomColor() { let rgb []; for(let index 0; index 3; index){ let color Math.floor(Math.random() * 256).toString(16); color color.length 1 ? 0 color : color; rgb.push(color); } return # rgb.join(); } Page({ data:{ // 此處替換為你的https視頻地址 / 云文件ID videoPath:https://www.w3schools.com/html/mov_bbb.mp4, // 預設(shè)彈幕text文字、color顏色、time出現(xiàn)時間(秒) danmuList:[ { text:鴻蒙世界奔騰不息, color:#ff0000, time:1 }, { text:HarmonyOS 7, color:#ff00ff, time:5 }, { text:華為開發(fā)者大會2026, color:#00ff00, time:10 }, { text:攜手助力筑牢金融安全, color:#00ffff, time:20 } ] }, onLoad(){ // 獲取VideoContext視頻上下文用于發(fā)送彈幕 const query wx.createSelectorQuery(); query.select(#my?video).context(); query.exec((res){ if(res[0]){ this.videoCtx res[0].context; } }) }, inputBlur(e){ // 輸入框失去焦點保存輸入內(nèi)容 this.inputValue e.detail.value; }, sendDanmu(){ // 發(fā)送自定義彈幕隨機顏色 this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })4.pages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); box-sizing: border-box; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } video { width: 95%; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }5.app.wxss全局公共樣式.box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }6.pages/index/index.json{}六、運行效果頁面頂部原生導航欄標題顯示video組件頁面完整展示橙色邊框、紅色標題。視頻播放器加載測試視頻視頻播放到對應秒數(shù)自動彈出預設(shè)彈幕。在輸入框輸入文字點擊發(fā)送彈幕按鈕視頻上彈出隨機顏色的彈幕。切換調(diào)試基礎(chǔ)庫版本低版本2.32.3播放器顯示彈幕開關(guān)按鈕。高版本3.17.4彈幕開關(guān)按鈕消失發(fā)送彈幕功能不受影響。七、實驗踩坑與問題解決頁面邊框、標題看不見被頂部遮擋原因開啟navigationStyle:custom自定義導航頁面沒有留出狀態(tài)欄安全高度。 解決關(guān)閉自定義導航欄使用系統(tǒng)原生導航css 添加padding?top: env(safe?area?inset?top)適配手機安全區(qū)。彈幕按鈕 danmu?btn 不顯示不是代碼錯誤小程序新版本基礎(chǔ)庫廢棄該屬性切換到低版本調(diào)試基礎(chǔ)庫即可看到彈幕開關(guān)。彈幕發(fā)送功能高低版本都可用。調(diào)用 sendDanmu 報錯彈幕發(fā)不出去原因沒有成功獲取VideoContext視頻上下文video 標簽缺少 id。 解決video 組件設(shè)置id在onLoad生命周期通過createSelectorQuery獲取上下文對象。真機視頻黑屏無法播放原因使用本地項目 mp4 文件或者 http 非加密鏈接。 解決視頻上傳云開發(fā)存儲拿到云文件 ID或者使用 https 公開視頻地址。預設(shè)彈幕完全不顯示檢查是否開啟enable?danmutrue確認danmuList數(shù)組內(nèi) time 時間單位是秒。八、實驗總結(jié)本次實驗學習小程序video媒體視頻組件掌握預設(shè)彈幕與實時發(fā)送彈幕的開發(fā)流程。 學會使用wx.createSelectorQuery獲取組件上下文調(diào)用組件實例方法。實現(xiàn)隨機十六進制顏色生成函數(shù)完成彈幕隨機變色效果。 同時認識小程序基礎(chǔ)庫版本差異性部分組件屬性會隨版本迭代廢棄。 掌握視頻資源的限制規(guī)則理解真機與模擬器行為差異開發(fā)視頻小程序時必須使用網(wǎng)絡視頻資源不能直接引用本地 mp4 文件。