微信小程式抖音實戰-小視訊彈幕
阿新 • • 發佈：2018-12-29
如果你去抖音只是為了看小視訊就少了一大樂趣，評論區才是最有趣的地方，邊看視訊邊看評論的彈幕是不是更有意思
首先看下效果圖
預覽效果截圖
實現思路
把最新的評論以彈幕的方式展示出來，隨機生成字型顏色
區域性程式碼變動
1. 增加一個隨機顏色生成演算法
function getRandomColor() { let rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') }
解讀一下:
Math.random() * 256 用來獲取一個 0 - 256 之間的一個隨機數
那為什麼要乘以256 呢，那是因為rgb的顏色最大是255
Math.floor 取整數，toString(16) 轉為 十六進位制的顏色碼
color = color.length == 1 ? '0' + color : color 補零操作
2. 視訊層開啟彈幕
<video id="myVideo" src="{{videoSrc}}" binderror="videoErrorCallback" autoplay='{{true}}' controls='{{false}}' class='slide-image' loop='true' show-progress='false' show-play-btn='false' show-center-play-btn='true' show-fullscreen-btn='false' objectFit='fill' enable-danmu>
增加了一個 enable-danmu 屬性
3. 播放視訊增加自動傳送彈幕
danmuTimer : null,// 彈幕定時器 previewSubject: function(){ var subject = this.data.subject; if (subject.type == 'video'){ // 設定視訊地址 this.setData({ videoSrc: subject.src, isHiddenVideo: false }) // 開始播放 this.videoContext.play(); // 自動傳送彈幕 var danMus = []; var that = this; api.loadTalks({ data: { subjectId: that.data.subject.subjectId, page: 1, rows: 60 }, success: function (page) { danMus = page.content; // 先播放最新的彈幕, 評論多的話，需要後臺資料排序 danMus.reverse(); console.log("獲取到 " + danMus.length + " 條評論", danMus) that.danmuTimer = setInterval(function () { var talk = danMus.pop(); if (talk){ console.log("傳送彈幕: " + talk.content) that.videoContext.sendDanmu({ text: talk.content, // 評論內容 color: getRandomColor() // 隨機顏色 }) }else{ clearInterval(that.danmuTimer); } }, 1000) } }); }else{ wx.previewImage({ urls: [subject.coverUrl], }) } },
增加一個彈幕定時器變數，在關閉視訊的時候使用
在開始播放的後面先請求後臺獲取評論資料，然後反轉一下
為了pop的時候能出來最新的評論，定時每個1秒傳送一個評論
當傳送完所有評論後關閉定時器
4. 隱藏視訊並關閉彈幕
hidePreview: function () {
var subject = this.data.subject;
if (subject.type == 'video') {
// 停止傳送彈幕
clearInterval(this.danmuTimer);
// 暫停播放
this.videoContext.pause();
// 隱藏視訊層
this.setData({
isHiddenVideo: true
})
}
},
還不趕緊去試試 ！！！留下你們的神評論，讓更多的同學看到
完整原始碼請到官網https://100boot.cn的抖音案例下載
抖音系列
關注我們
如果需要原始碼和素材可以關注“IT實戰聯盟”公*眾*號並留言（微商城原始碼，5個字會收到原始碼下載地址，一定要看原始碼裡面的操作手冊會少走很多彎路），也可以加入交流群和作者互撩哦~~~