微信小程序視頻彈幕發(fā)送功能的實現
更新時間：2020年12月28日 12:00:38 作者：保護我方豆豆
這篇文章主要介紹了微信小程序視頻彈幕發(fā)送功能的實現,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 目錄結構
2. videoDanmu
<!-- 視頻區(qū)域 -->
<video src="{{src}}"
id='video'
danmu-btn
enable-danmu
danmu-list="{{ danmuList }}"
>
</video>
<!-- 彈幕發(fā)送區(qū)域 -->
<view class='sendDanmu'>
<textarea name="" id="" cols="30" rows="10" placeholder="請輸入彈幕"
bindinput="handleDanmuContent"
></textarea>
<button type='primary' bindtap="handleSendDanmu"> 發(fā)送 </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>
/* 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;
}
// pages/videoDanmu/videoDanmu.js
Page({
/**
* 頁面的初始數據
*/
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})`
},
// 發(fā)送彈幕
handleSendDanmu(){
let color = '';
// 通過狀態(tài)值判斷是默認顏色還是隨機顏色
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",
})
},
/**
* 生命周期函數--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
// 創(chuàng)建 video 上下文 VideoContext 對象。通過這個對象發(fā)送彈幕
this.videoContext = wx.createVideoContext('video', this)
}
})
3. selectColor
<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>
/* 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;
}
// pages/selectColor/selectColor.js
import 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,
})
}
})
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. 效果圖
顏色選擇
到此這篇關于微信小程序視頻彈幕發(fā)送功能的實現的文章就介紹到這了,更多相關小程序視頻彈幕發(fā)送內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
webpack教程之webpack.config.js配置文件
本篇文章主要介紹了webpack教程之webpack.config.js配置文件 ，具有一定的參考價值，有興趣的可以了解一席2017-07-07
js利用與或運算符優(yōu)先級實現if else條件判斷表達式
利用與或運算符優(yōu)先級實現if else運算，讓你的代碼更精簡。2010-04-04
下面小編就為大家?guī)硪黄獢到MArray的排序sort方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了JavaScript中$.ajax()最新用法的相關資料,包括基礎語法、現代回調方式、異步處理、高級場景示例、錯誤處理、安全注意事項、替代方法以及調試技巧,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了webpack -v報錯解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
MySQL作為最常用的開源關系型數據庫管理系統(tǒng)之一,一直在不斷發(fā)展和改進,其中,MySQL 5.7和MySQL 8是兩個備受關注的版本,它們之間存在一些關鍵的差異,本文將深入探討這兩個版本之間的主要差異,需要的朋友可以參考下2023-11-11
說文字溢出，如何實現溢出的文字放入一個新生成的div中，原理就是判斷是否能在div里放下，如果不能，則在應該斷開的地方，差入到新的div中2013-05-05
這篇文章主要為大家詳細介紹了js實現京東快遞單號查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序class封裝http,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了微信小程序實現驗證碼獲取倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02