1. 目錄結構
2. videoDanmu
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!-- 視頻區域 --><video src="{{src}}"id='video'danmu-btnenable-danmudanmu-list="{{ danmuList }}"></video><!-- 彈幕發送區域 --><view class='sendDanmu'> <textarea name="" id="" cols="30" rows="10" placeholder="請輸入彈幕" bindinput="handleDanmuContent" ></textarea> <button type='primary' bindtap="handleSendDanmu"> 發送 </button></view><!-- 是否隨機顏色 --><view class='selectColor'> <text> 隨機顏色 </text> <switch bindchange='handleChange'></switch></view><!-- 選擇默認顏色 --><view class='selectDefaultColor' bindtap="handleGotoSelectColor"> <text> 選擇顏色 </text> <view style="background: {{ defaultColor }}"></view></view> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/* pages/videoDanmu/videoDanmu.wxss */#video{ width: 100%; height: calc(750rpx * 225 / 300);}.sendDanmu{ display: flex; height: 100rpx;}.sendDanmu textarea{ border: 1px solid #ddd; height: 100rpx;}.selectColor{ display: flex; justify-content: space-between; margin-top: 20rpx; border: 1px solid #ddd; align-items: center;}.selectDefaultColor{ display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; margin-top: 20rpx; margin-right: 30rpx;}.selectDefaultColor view{ width: 50rpx; height: 50rpx; background-color: red;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
// pages/videoDanmu/videoDanmu.jsPage({ /** * 頁面的初始數據 */ data: { // 視頻地址 src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", danmuList: [{ text: '第 1s 出現的彈幕', color: '#ff0000', time: 1 }, { text: '第 3s 出現的彈幕', color: '#ff00ff', time: 3 }], // 初始彈幕列表 defaultColor: 'red', // 彈幕默認顏色 isRandomColor: false, // 控制彈幕是否隨機顏色 }, // 獲取彈幕內容 handleDanmuContent(e){ this.content = e.detail.value; }, // 隨機彈幕顏色 randomColor(){ let red = Math.random() * 255; let green = Math.random() * 255; let blue = Math.random() * 255; return `rgb(${red}, ${green}, ${blue})` }, // 發送彈幕 handleSendDanmu(){ let color = ''; // 通過狀態值判斷是默認顏色還是隨機顏色 if(this.data.isRandomColor){ color = this.randomColor() }else{ color = this.data.defaultColor } this.videoContext.sendDanmu({ text: this.content, color }) }, // 處理彈幕是否隨機顏色 handleChange(e){ // console.log(e.detail.value) this.setData({ isRandomColor: e.detail.value }) }, // 跳轉到選擇顏色頁面 handleGotoSelectColor(){ wx.navigateTo({ url: "/pages/selectColor/selectColor", }) }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { // 創建 video 上下文 VideoContext 對象。通過這個對象發送彈幕 this.videoContext = wx.createVideoContext('video', this) }}) |
3. selectColor
|
1
2
3
4
5
6
7
8
9
|
<view class='color-wrap'> <view wx:for="{{ color }}" wx:key='index' style="background: {{ item.number }}" bindtap="handleGetColor" data-color=" {{ item.number }} " > {{ item.color }} </view></view> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/* pages/selectColor/selectColor.wxss */.color-wrap{ display: flex; justify-content: space-between; flex-wrap: wrap;}.color-wrap view{ width: 100rpx; height: 100rpx; background-color: red; margin-top: 20rpx;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// pages/selectColor/selectColor.jsimport color from './color'Page({ /** * 頁面的初始數據 */ data: { color }, // 獲取選擇的顏色 handleGetColor(e){ // console.log(e.currentTarget.dataset.color) const color = e.currentTarget.dataset.color; // 獲取頁面棧 const pages = getCurrentPages() const page = pages[0]; // 上一頁面 page.setData({ defaultColor: color }) // 返回上一頁面 wx.navigateBack({ delta: 0, }) }}) |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
export default [ { key: 1, color: ' 白色 ', number: '#FFFFFF' }, { key: 2, color: ' 紅色 ', number: '#FF0000' }, { key: 3, color: ' 綠色 ', number: '#00FF00' }, { key: 4, color: ' 藍色 ', number: '#0000FF' }, { key: 5, color: ' 牡丹紅 ', number: '#FF00FF' }, { key: 6, color: ' 青色 ', number: '#00FFFF' }, { key: 7, color: ' 黃色 ', number: '#FFFF00' }, { key: 8, color: ' 黑色 ', number: '#000000' }, { key: 9, color: ' 海藍 ', number: '#70DB93' }, { key: 10, color: ' 巧克力色 ', number: '#5C3317' }, { key: 11, color: ' 藍紫色 ', number: '#9F5F9F' }, { key: 12, color: ' 黃銅色 ', number: '#B5A642' }, { key: 13, color: ' 亮金色 ', number: '#D9D919' }, { key: 14, color: ' 棕色 ', number: '#A67D3D' }, { key: 15, color: ' 青銅色 ', number: '#8C7853' }, { key: 16, color: ' 2號青銅色 ', number: '#A67D3D' }, { key: 17, color: ' 士官服藍色 ', number: '#5F9F9F' }, { key: 18, color: ' 冷銅色 ', number: '#D98719' }, { key: 19, color: ' 銅色 ', number: '#B87333' }, { key: 20, color: ' 珊瑚紅 ', number: '#FF7F00' }, { key: 21, color: ' 紫藍色 ', number: '#42426F' }, { key: 22, color: ' 深棕 ', number: '#5C4033' }, { key: 23, color: ' 深綠 ', number: '#2F4F2F' }, { key: 24, color: ' 深銅綠色 ', number: '#4A766E' }, { key: 25, color: ' 深橄欖綠 ', number: '#4F4F2F' }, { key: 26, color: ' 深蘭花色 ', number: '#9932CD' }, { key: 27, color: ' 深紫色 ', number: '#871F78' }, { key: 28, color: ' 深石板藍 ', number: '#6B238E' }, { key: 29, color: ' 深鉛灰色 ', number: '#2F4F4F' }, { key: 30, color: ' 深棕褐色 ', number: '#97694F' }, { key: 32, color: ' 深綠松石色 ', number: '#7093DB' }, { key: 33, color: ' 暗木色 ', number: '#855E42' }, { key: 34, color: ' 淡灰色 ', number: '#545454' }, { key: 35, color: ' 土灰玫瑰紅色 ', number: '#856363' }, { key: 36, color: ' 長石色 ', number: '#D19275' }, { key: 37, color: ' 火磚色 ', number: '#8E2323' }, { key: 38, color: ' 森林綠 ', number: '#238E23' }, { key: 39, color: ' 金色 ', number: '#CD7F32' }, { key: 40, color: ' 鮮黃色 ', number: '#DBDB70' }, { key: 41, color: ' 灰色 ', number: '#C0C0C0' }, { key: 42, color: ' 銅綠色 ', number: '#527F76' }, { key: 43, color: ' 青黃色 ', number: '#93DB70' }, { key: 44, color: ' 獵人綠 ', number: '#215E21' }, { key: 45, color: ' 印度紅 ', number: '#4E2F2F' }, { key: 46, color: ' 土黃色 ', number: '#9F9F5F' }, { key: 47, color: ' 淺藍色 ', number: '#C0D9D9' }, { key: 48, color: ' 淺灰色 ', number: '#A8A8A8' }, { key: 49, color: ' 淺鋼藍色 ', number: '#8F8FBD' }, { key: 59, color: ' 淺木色 ', number: '#E9C2A6' }, { key: 60, color: ' 石灰綠色 ', number: '#32CD32' }, { key: 61, color: ' 桔黃色 ', number: '#E47833' }, { key: 62, color: ' 褐紅色 ', number: '#8E236B' }, { key: 63, color: ' 中海藍色 ', number: '#32CD99' }, { key: 64, color: ' 中藍色 ', number: '#3232CD' }, { key: 65, color: ' 中森林綠 ', number: '#6B8E23' }, { key: 66, color: ' 中鮮黃色 ', number: '#EAEAAE' }, { key: 67, color: ' 中蘭花色 ', number: '#9370DB' }, { key: 68, color: ' 中海綠色 ', number: '#426F42' }, { key: 69, color: ' 中石板藍色 ', number: '#7F00FF' }, { key: 70, color: ' 中春綠色 ', number: '#7FFF00' }, { key: 71, color: ' 中綠松石色 ', number: '#70DBDB' }, { key: 72, color: ' 中紫紅色 ', number: '#DB7093' }, { key: 73, color: ' 中木色 ', number: '#A68064' }, { key: 74, color: ' 深藏青色 ', number: '#2F2F4F' }, { key: 75, color: ' 海軍藍 ', number: '#23238E' }, { key: 76, color: ' 霓虹籃 ', number: '#4D4DFF' }, { key: 77, color: ' 霓虹粉紅 ', number: '#FF6EC7' }, { key: 78, color: ' 新深藏青色 ', number: '#00009C' }, { key: 79, color: ' 新棕褐色 ', number: '#EBC79E' }, { key: 80, color: ' 暗金黃色 ', number: '#CFB53B' }, { key: 81, color: ' 橙色 ', number: '#FF7F00' }, ]; |
4. 效果圖
顏色選擇
到此這篇關于微信小程序視頻彈幕發送功能的實現的文章就介紹到這了,更多相關小程序視頻彈幕發送內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/gklcsdn/article/details/111823940
