index.wxml文件navigation-bar titlevideo组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle华为开发者大会-2026/view view classvideo-layout video idmy-video src{{videoPath}} controlstrue danmu-list{{danmuList}} enable-danmutrue danmu-btntrue / /view view classtxt-style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur / button typeprimary bind:tapsendDanmu发送弹幕/button /view /scroll-viewindex.wxss文件page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }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) } console.log(rgb); return # rgb.join() } Page({ data: { videoPath: https://636c-cloud1-d5gy9l3hc0a2586a8-1504552563.tcb.qcloud.la/videos/%E5%8D%8E%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A2026.mp4?sign26344cba7e4b974bd6763ecdffbe7d7et1792908571, danmuList: [ { text: 鸿蒙世界奔腾不息, color: #ff0000, time: 1 }, { text: HarmonyOS 7, color: #ff00ff, time: 5 }, { text: 华为开发者大会2026, color: #00ff00, time: 10 }, { text: 携手助力筑牢金融安全, color: #00ffff, time: 20 } ] }, onLoad() { const query wx.createSelectorQuery() query.select(#my-video).context() query.exec((res) { if (res[0]) { this.videoCtx res[0].context } }) }, inputBlur(e) { console.log(e); this.inputValue e.detail.value }, sendDanmu() { this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }本文实现了一个基于微信小程序的视频播放页面集成弹幕功能。通过lt;videogt;组件播放华为开发者大会2026视频支持弹幕发送与显示。用户可输入弹幕内容并随机生成颜色点击“发送弹幕”按钮实时推送至视频。页面采用scroll-view滚动布局结合navigation-bar实现导航栏自定义整体结构清晰交互流畅展现了小程序在多媒体互动应用中的实践能力。 
长河君 · 2026/10/27 2:03:07 · 阅读 1.2k video组件
index.wxml文件navigation-bar titlevideo组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle华为开发者大会-2026/view view classvideo-layout video idmy-video src{{videoPath}} controlstrue danmu-list{{danmuList}} enable-danmutrue danmu-btntrue / /view view classtxt-style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur / button typeprimary bind:tapsendDanmu发送弹幕/button /view /scroll-viewindex.wxss文件page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }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) } console.log(rgb); return # rgb.join() } Page({ data: { videoPath: https://636c-cloud1-d5gy9l3hc0a2586a8-1504552563.tcb.qcloud.la/videos/%E5%8D%8E%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A2026.mp4?sign26344cba7e4b974bd6763ecdffbe7d7et1792908571, danmuList: [ { text: 鸿蒙世界奔腾不息, color: #ff0000, time: 1 }, { text: HarmonyOS 7, color: #ff00ff, time: 5 }, { text: 华为开发者大会2026, color: #00ff00, time: 10 }, { text: 携手助力筑牢金融安全, color: #00ffff, time: 20 } ] }, onLoad() { const query wx.createSelectorQuery() query.select(#my-video).context() query.exec((res) { if (res[0]) { this.videoCtx res[0].context } }) }, inputBlur(e) { console.log(e); this.inputValue e.detail.value }, sendDanmu() { this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }本文实现了一个基于微信小程序的视频播放页面集成弹幕功能。通过lt;videogt;组件播放华为开发者大会2026视频支持弹幕发送与显示。用户可输入弹幕内容并随机生成颜色点击“发送弹幕”按钮实时推送至视频。页面采用scroll-view滚动布局结合navigation-bar实现导航栏自定义整体结构清晰交互流畅展现了小程序在多媒体互动应用中的实践能力。