一、實驗目的掌握小程序video視頻組件常用屬性實現(xiàn)視頻播放。理解彈幕機制學會配置預設彈幕列表danmuList。掌握wx.createSelectorQuery()獲取VideoContext視頻上下文調用sendDanmu()發(fā)送實時彈幕。實現(xiàn)隨機十六進制顏色函數(shù)讓發(fā)送的彈幕顏色隨機變化。了解小程序基礎庫版本差異danmu?btn彈幕開關按鈕僅低版本基礎庫生效高版本該屬性失效。掌握 input 輸入框bind:blur失去焦點事件獲取用戶輸入內容。二、實驗環(huán)境開發(fā)工具微信開發(fā)者工具項目模式不使用云服務、不使用模板渲染引擎renderer:webviewwebview 渲染模式三、實驗需求分析基礎功能頁面展示 video 視頻播放器視頻播放到指定時間自動播放預設彈幕。提供輸入框用戶輸入文字點擊按鈕發(fā)送彈幕彈幕顏色隨機生成。頁面包含橙色外邊框紅色頁面標題原生導航欄標題為 video 組件。作業(yè)擴充要求切換低版本調試基礎庫播放器顯示彈幕開關按鈕。切換高版本調試基礎庫彈幕開關按鈕消失彈幕發(fā)送功能仍然正?？捎?。四、核心知識點梳理1.video 組件核心屬性表格屬性說明id組件標識用于獲取視頻上下文src視頻資源地址必須為 https 網(wǎng)絡地址或者云文件 ID不能使用本地項目內 mp4 文件controlstrue顯示播放控件播放、進度條、全屏danmu?list預設彈幕數(shù)組每個彈幕對象包含text彈幕文字、color彈幕顏色、time彈幕出現(xiàn)時間單位秒enable?danmutrue開啟彈幕總開關必須開啟彈幕才會顯示danmu?btntrue彈幕開關按鈕僅低基礎庫版本生效高版本廢棄該屬性2.VideoContext 視頻上下文通過wx.createSelectorQuery()查詢獲取 video 組件上下文對象調用sendDanmu({text,color})接口實現(xiàn)向視頻發(fā)送實時彈幕。3. 隨機十六進制顏色利用Math.random()生成 0?255 的數(shù)字使用toString(16)轉為十六進制如果是單字符前面補0拼接成#RRGGBB標準顏色格式。4.input bind:blur 事件輸入框失去焦點才捕獲輸入內容保存文本用于后續(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彈幕內容/view input typetext placeholder在此處輸入彈幕內容 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, // 預設彈幕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){ // 輸入框失去焦點保存輸入內容 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ù)自動彈出預設彈幕。在輸入框輸入文字點擊發(fā)送彈幕按鈕視頻上彈出隨機顏色的彈幕。切換調試基礎庫版本低版本2.32.3播放器顯示彈幕開關按鈕。高版本3.17.4彈幕開關按鈕消失發(fā)送彈幕功能不受影響。七、實驗踩坑與問題解決頁面邊框、標題看不見被頂部遮擋原因開啟navigationStyle:custom自定義導航頁面沒有留出狀態(tài)欄安全高度。 解決關閉自定義導航欄使用系統(tǒng)原生導航css 添加padding?top: env(safe?area?inset?top)適配手機安全區(qū)。彈幕按鈕 danmu?btn 不顯示不是代碼錯誤小程序新版本基礎庫廢棄該屬性切換到低版本調試基礎庫即可看到彈幕開關。彈幕發(fā)送功能高低版本都可用。調用 sendDanmu 報錯彈幕發(fā)不出去原因沒有成功獲取VideoContext視頻上下文video 標簽缺少 id。 解決video 組件設置id在onLoad生命周期通過createSelectorQuery獲取上下文對象。真機視頻黑屏無法播放原因使用本地項目 mp4 文件或者 http 非加密鏈接。 解決視頻上傳云開發(fā)存儲拿到云文件 ID或者使用 https 公開視頻地址。預設彈幕完全不顯示檢查是否開啟enable?danmutrue確認danmuList數(shù)組內 time 時間單位是秒。八、實驗總結本次實驗學習小程序video媒體視頻組件掌握預設彈幕與實時發(fā)送彈幕的開發(fā)流程。 學會使用wx.createSelectorQuery獲取組件上下文調用組件實例方法。實現(xiàn)隨機十六進制顏色生成函數(shù)完成彈幕隨機變色效果。 同時認識小程序基礎庫版本差異性部分組件屬性會隨版本迭代廢棄。 掌握視頻資源的限制規(guī)則理解真機與模擬器行為差異開發(fā)視頻小程序時必須使用網(wǎng)絡視頻資源不能直接引用本地 mp4 文件。