WeChat applet implements video player sending bullet screen
|
This article shares the specific code for WeChat applet to implement video player sending barrage for your reference. The specific content is as follows 1. Video Player
1. Page creation
2. Select the color of the bullet screen
3. Use of Video plugin
4. Related Code app.json
//app.json
{
"pages":[
"pages/video-detail/video-detail",
"pages/select-color/select-color",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Video Player",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}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;
} 2. Video-detail video player related page codevideo-detail.wxml
<!--pages/video-detail/video-detail.wxml-->
<view class="mainContent">
<view class="mainList">
<view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">
<view class="video">
<video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"
danmu-list="{{danmuList}}" danmu-btn enable-danmu
src="{{videoDetail.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>
</view>
</view>
<view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =='' || current_id != videoDetail.id}}">
<view class="video">
<image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
<image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
</view>
</view>
</view>
<!--Bullet screen-->
<view class="danmu">
<view class="danmu-input">
<input class="weui-input" type="text" placeholder="Please enter the bullet screen" bindblur="bindInputblur"/>
</view>
<view class="danmu-btn">
<button type="primary" bindtap = "bindSendDanmu">Send Danmu</button>
</view>
<view class="danmu-color">
<view class="danmu-color-switch">
<view class="weui-cell-bd">Random color</view>
<view class="weui-cell-ft">
<switch checked="true" type="switch" bindchange="switchChange"></switch>
</view>
</view>
<view class="danmu-color-select" bindtap = "selectColor">
<view class="weui-cell-bd">Select color</view>
<view class="weui-cell-ft">
<view class="selectColor" style="background-color: {{numberColor}};"></view>
</view>
</view>
</view>
</view>
</view>video-detail.wxss
.mainContent{
background: #ffffff;
overflow:auto;
}
.mainList{
width:100%;
background: #ffffff;
height: 396rpx;
}
.video{
width:94%;
height: 324rpx;
margin-left: 20rpx;
position: relative;
}
.videoContent{
width:100%;
height: 324rpx;
}
/*Play small icon*/
.playImg{
position: absolute;
top: 46%;
left:46%;
width:64rpx;
height: 64rpx;
}
/*Bullet screen*/
.danmu{
width:100%;
}
.danmu-input{
width:100%;
height: 60rpx;
}
.weui-input{
display: flex;
width:94%;
height: 60rpx;
align-items: center;
margin-left: 20rpx;
border-radius: 8rpx;
border:2rpx solid #cccccc;
padding-left:10rpx;
font-size: 28rpx;
}
.danmu-btn{
width:100%;
margin-top: 20rpx;
}
.danmu-color{
width:100%;
margin-top: 20rpx;
border-top:2rpx solid #cccccc;
}
.danmu-color-switch, .danmu-color-select{
display: flex;
flex-direction: row;
justify-content: space-between;/*Align both ends*/
align-items: center;
margin: 20rpx 20rpx 0 20rpx;
}
.weui-cell-bd{
font-size: 28rpx;
}
.weui-cell-ft{
font-size: 28rpx;
}
.selectColor{
width:80rpx;
height: 80rpx;
line-height: 100rpx;
}video-detail.js
// pages/video-detail/video-detail.js
Page({
/**
* Initial data of the page */
data: {
current_id:'', //currently playing video id
videoDetail:{
id:"1",
"videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",
"poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"
},
//danmuList:[
{
text: 'The red bullet screen that appears in the first second',
color: '#ff0000',
time: 1
},
{
text: 'The green bullet screen that appears in the second second',
color: '#00ff00',
time: 2
},
],
isRandomColor: true, //Default random numberColor: "#ff0000", //Default red inputValue: "", //Text box input content},
/**
* Life cycle function--listen for page loading*/
onLoad: function (options) {
},
/**
* Life cycle function--monitor page display*/
onShow: function(){
if (wx.getStorageSync('color')) {
this.setData({
numberColor: wx.getStorageSync('color')
})
}
},
/**
* Life cycle function - listen for the completion of the initial rendering of the page*/
onReady: function () {
this.videoContext = wx.createVideoContext("videoId")
},
//Video list click event videoPlay:function(e){
console.log(e)
var id = e.currentTarget.dataset.index
var currentId=e.currentTarget.id
this.setData({
current_id: currentId
})
var videoContext = wx.createVideoContext(id)
videoContext.play()
},
//Text box loses focus event bindInputblur: function(e){
// console.log(e.detail.value)
this.data.inputValue = e.detail.value
},
//Send the content of the bullet screen bindSendDanmu : function (e) {
//Set the barrage color var color=""
if(this.data.isRandomColor){//Random color color = this.getRandomColor()
}else{
color = this.data.numberColor
}
//Send Danmuthis.videoContext.sendDanmu({
text: this.data.inputValue,
color:color
})
},
//Set random color 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('')
},
//switch switch event switchChange: function(e){
console.log(e)
this.data.isRandomColor = e.detail.value
},
//Select color selectColor:function(){
wx.navigateTo({
url: '/pages/select-color/select-color'
})
}
}) 3. select-color sends barrage related page codeselect-color.wxml
<!--pages/select-color/select-color.wxml-->
<view class="page">
<view class="page_bd">
<view class="color-items">
<block wx:for="{{colorItems}}">
<view class="item" data-number="{{item.number}}" bindtap = "selectColor">
<view class="item-icon" style="background: {{item.number}};"></view>
</view>
</block>
</view>
</view>
</view>select-color.wxss
/* pages/select-color/select-color.wxss */
.color-items{
border-top: 1rpx solid #d9d9d9;
border-left: 1rpx solid #d9d9d9;
}
.item{
position: relative;
float: left;
padding: 20rpx;
width: 20%;
box-sizing: border-box;
border-right: 1rpx solid #d9d9d9;
border-bottom: 1rpx solid #d9d9d9;
}
.item-icon{
display: block;
width:100rpx;
height: 100rpx;
margin: 0 auto;
box-shadow: 3px 3px 5px #bbbbbb;
}select-color.js
// pages/select-color/select-color.js
Page({
/**
* Initial data of the page */
data: {
colorItems:[
{ key: 1, color: 'white', number: '#FFFFFF' },
{ key: 2, color: 'red', number: '#FF0000' },
{ key: 3, color: 'green', number: '#00FF00' },
{ key: 4, color: 'blue', number: '#0000FF' },
{ key: 5, color: 'Peony Red', number: '#FF00FF' },
{ key: 6, color: 'cyan', number: '#00FFFF' },
{ key: 7, color: 'yellow', number: '#FFFF00' },
{ key: 8, color: 'black', number: '#000000' },
{ key: 9, color: 'sea blue', number: '#70DB93' },
{ key: 10, color: 'Chocolate', number: '#5C3317' },
{ key: 11, color: 'blue purple', number: '#9F5F9F' },
{ key: 12, color: 'Brass', number: '#B5A642' },
{ key: 13, color: 'bright gold', number: '#D9D919' },
{ key: 14, color: 'brown', number: '#A67D3D' },
{ key: 15, color: 'Bronze', number: '#8C7853' },
{ key: 16, color: ' Bronze No. 2', number: '#A67D3D' },
{ key: 17, color: 'NCO blue', number: '#5F9F9F' },
{ key: 18, color: 'cold copper', number: '#D98719' },
{ key: 19, color: 'copper', number: '#B87333' },
{ key: 20, color: 'Coral Red', number: '#FF7F00' },
{ key: 21, color: 'purple blue', number: '#42426F' },
{ key: 22, color: 'dark brown', number: '#5C4033' },
{ key: 23, color: 'dark green', number: '#2F4F2F' },
{ key: 24, color: 'Dark copper green', number: '#4A766E' },
{ key: 25, color: 'Dark olive green', number: '#4F4F2F' },
{ key: 26, color: 'Dark orchid', number: '#9932CD' },
{ key: 27, color: 'dark purple', number: '#871F78' },
{ key: 28, color: 'Dark Slate Blue', number: '#6B238E' },
{ key: 29, color: 'Dark lead gray', number: '#2F4F4F' },
{ key: 30, color: 'dark brown', number: '#97694F' },
{ key: 32, color: 'dark turquoise', number: '#7093DB' },
{ key: 33, color: 'Dark Wood', number: '#855E42' },
{ key: 34, color: 'light gray', number: '#545454' },
{ key: 35, color: 'Dust-gray rose red', number: '#856363' },
{ key: 36, color: 'Feldspar', number: '#D19275' },
{ key: 37, color: 'fire brick color', number: '#8E2323' },
{ key: 38, color: 'Forest Green', number: '#238E23' },
{ key: 39, color: 'gold', number: '#CD7F32' },
{ key: 40, color: 'bright yellow', number: '#DBDB70' },
{ key: 41, color: 'grey', number: '#C0C0C0' },
{ key: 42, color: 'copper green', number: '#527F76' },
{ key: 43, color: 'cyan yellow', number: '#93DB70' },
{ key: 44, color: 'Hunter Green', number: '#215E21' },
{ key: 45, color: 'Indian Red', number: '#4E2F2F' },
{ key: 46, color: 'khaki', number: '#9F9F5F' },
{ key: 47, color: 'light blue', number: '#C0D9D9' },
{ key: 48, color: 'light grey', number: '#A8A8A8' },
{ key: 49, color: 'Light Steel Blue', number: '#8F8FBD' },
{ key: 59, color: 'Light wood', number: '#E9C2A6' },
{ key: 60, color: 'lime green', number: '#32CD32' },
{ key: 61, color: 'orange', number: '#E47833' },
{ key: 62, color: 'maroon', number: '#8E236B' },
{ key: 63, color: 'Mid-sea blue', number: '#32CD99' },
{ key: 64, color: 'medium blue', number: '#3232CD' },
{ key: 65, color: 'Medium Forest Green', number: '#6B8E23' },
{ key: 66, color: 'medium bright yellow', number: '#EAEAAE' },
{ key: 67, color: 'medium orchid', number: '#9370DB' },
{ key: 68, color: 'Medium sea green', number: '#426F42' },
{ key: 69, color: 'Medium Slate Blue', number: '#7F00FF' },
{ key: 70, color: 'medium spring green', number: '#7FFF00' },
{ key: 71, color: 'Medium Turquoise', number: '#70DBDB' },
{ key: 72, color: 'medium purple', number: '#DB7093' },
{ key: 73, color: 'Medium wood color', number: '#A68064' },
{ key: 74, color: 'dark navy', number: '#2F2F4F' },
{ key: 75, color: 'Navy Blue', number: '#23238E' },
{ key: 76, color: 'Neon Basket', number: '#4D4DFF' },
{ key: 77, color: 'Neon Pink', number: '#FF6EC7' },
{ key: 78, color: 'New dark blue', number: '#00009C' },
{ key: 79, color: 'New Tan', number: '#EBC79E' },
{ key: 80, color: 'dark golden yellow', number: '#CFB53B' },
{ key: 81, color: 'orange', number: '#FF7F00' },
]
},
/**
* Life cycle function--listen for page loading*/
onLoad: function (options) {
},
/**
* Life cycle function - listen for the completion of the initial rendering of the page*/
onReady: function () {
},
//Click to select a color selectColor(e){
console.log(e)
let number = e.currentTarget.dataset.number
//Stored locally wx.setStorageSync('color', number)
//Return to the previous page wx.navigateBack({
delta: 1, // delta before rollback (default is 1) Page success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})4. Page Implementation Effect
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to install Maven automatically in Linux continuous integration
>>: Solution to mysql login warning problem
Recommend
The easiest way to reset mysql root password
My mysql version is MYSQL V5.7.9, please use the ...
5 ways to migrate Docker containers to other servers
Migration is unavoidable in many cases. Hardware ...
VMware virtual machine three connection methods example analysis
NAT In this way, the virtual machine's networ...
How to install Linux online software gcc online
Linux online installation related commands: yum i...
Windows Server 2019 Install (Graphical Tutorial)
Windows Server 2019 is the latest server operatin...
CentOS7 installation zabbix 4.0 tutorial (illustration and text)
Disable SeLinux setenforce 0 Permanently closed: ...
How to set the width and height of html table cells
When making web pages, you often encounter the pr...
Ubuntu compiles kernel modules, and the content is reflected in the system log
Table of contents 1.Linux login interface 2. Writ...
Understand the initial use of redux in react in one article
Redux is a data state management plug-in. When us...
How to solve the problem of clicking tomcat9.exe crashing
A reader contacted me and asked why there were pr...
JS realizes the case of eliminating stars
This article example shares the specific code of ...
MySQL process control IF(), IFNULL(), NULLIF(), ISNULL() functions
In MySQL, you can use IF(), IFNULL(), NULLIF(), a...
Detailed explanation of the use and precautions of crontab under Linux
Crontab is a command used to set up periodic exec...
nginx+tomcat example of accessing the project through the domain name
I was curious about how to access the project usi...
How to quickly install and deploy MySQL in Windows system (green free installation version)
First, download the green free installation versi...