Micro-credit program development video player Videos Pinball screen color custom instance _javascript tips

Would it be more fun to have the video playback of the micro-mail program after you've tried the recording module?

Sure enough, the micro-mail program video with a barrage. Isn't that cool, come with me.

First on GIF:

A few more pictures:

1. Video player

2. Choose the color of the bomb screen

3. The barrage is coming ...

1. Video player

Micro-letters have been encapsulated very well. I've only used a few simple attributes here.

Since he had not done the curtain before, I was excited to see Danmu-list. And just add the contents of the curtain to the collection.

Elements of a list of bullets:

 {
    text: ' 1s appears in red bullets ',//Text color
    : ' #ff0000 ',//Colors
    time:1//send Time
   }

Other attributes are not said, and later encountered a careful study.

2. Choose the color of the bomb screen

From the top of the list of bullets, it can be seen that the micro-letter does not give developers too much customization space. Text, time, color?

Also can play a little bit of a pattern of color.

So I simply made a list of commonly used colors. It's a custom paintball screen color.

Code on:

PS: The code is not tidy, very rotten, gather to live to see it.

1.index.wxml

<!--index.wxml--> <view class= "section TC" > <video id= "myvideo" style= "Height:{{videoheight}}px;width" : {{videowidth}}px "src=" http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey= 30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=sh &fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400 " Binderror= "Videoerrorcallback" danmu-list= "{{danmulist}}" Enable-danmu danmu-btn controls></video> < 
          View class= "Btn-area" > <view class= "Weui-cell weui-cell_input" > <view class= "WEUI-CELL__BD" > <input class= "weui-input" placeholder= "Please input the barrage" bindblur= "Bindinputblur"/> </view> &l t;/view> <button style= "MARGIN:30RPX;" bindtap= "Bindsenddanmu" > Send barrage </button> </view> </vi ew> <view class= "Weui-cells weui-cells_after-title" > <view class= "weui-cell Weui-cell_switch "> <view class=" weui-cell__bd "> Random color </view> <view class=" weui-cell__ FT "> <switch checked bindchange=" Switchchange "/> </view> </view> <view cl ass= "Colorstyle" bindtap= "Selectcolor" > <text> Select colors </text> <view style= "HEIGHT:80RPX;WIDTH:80RPX; 
 Line-height:100rpx;margin:10rpx;background-color:{{numbercolor}} "></view> </view>

2.index.wxss

(Glued from another project. haha)

/**index.wxss**/. weui-cells {position:relative; 
 Margin-top:1.17647059em; 
 Background-color: #FFFFFF; 
 line-height:1.41176471; 
font-size:17px; 
 }. Weui-cells:before {content: ""; 
 Position:absolute; 
 left:0; 
 top:0; 
 right:0; 
 height:1px; 
 BORDER-TOP:1RPX solid #D9D9D9; 
  
Color: #D9D9D9; 
 }. Weui-cells:after {content: ""; 
 Position:absolute; 
 left:0; 
 bottom:0; 
 right:0; 
 height:1px; 
 BORDER-BOTTOM:1RPX solid #D9D9D9; 
Color: #D9D9D9; 
}. weui-cells_after-title {margin-top:0; 
 }. weui-cell__bd {-webkit-box-flex:1; 
     -webkit-flex:1; 
Flex:1; 
 }. weui-cell__ft {text-align:right; 
Color: #999999; 
 }. Weui-cell {padding:10px 10px; 
 position:relative; 
 Display:-webkit-box; 
 Display:-webkit-flex; 
 Display:flex; 
 -webkit-box-align:center; 
     -webkit-align-items:center; 
Align-items:center; 
 }. Weui-cell:before {content: ""; 
 Position:absolute; 
 top:0; 
 right:0; 
 height:1px; Border-TOP:1RPX solid #D9D9D9; 
 Color: #D9D9D9; 
left:15px; 
}. weui-cell:first-child:before {display:none; 
  }. colorstyle{border-top:2px solid #eee; 
  border-bottom:2px solid #eee; 
  padding-left:10px; 
  padding-right:10px; 
  font-size:17px; 
  LINE-HEIGHT:100RPX; 
  Display:flex; 
  Flex-direction:row; 
Justify-content:space-between; 
 }

3.index.js

Index.js function Getrandomcolor () {let-i = 0; i < 3; ++i) {Let color = Math.floor (Math. Random () * 256). toString color = Color.length = 1?  ' 0 ' + color:color rgb.push (color)} return ' # ' + Rgb.join (')} Page ({onload:function () {var _this = 
  This 
    Gets the screen width high wx.getsysteminfo ({success:function (res) {var windowwidth = res.windowwidth; 
    Video label recognition width 300px, height 225px, set wide and high need to set width and height through WXSS. var videoheight = (225/300) * windowwidth//screen height-width ratio console.log (' Videowidth: ' + windowwidth ') console.log (' Video 
  Height: ' + videoheight) _this.setdata ({videowidth:windowwidth, videoheight:videoheight})} }), Onready:function (res) {this.videocontext = Wx.createvideocontext (' Myvideo ')}, Onshow:function () 
  {var _this = this; Gets the number of years Wx.getstorage ({key: ' Numbercolor ', success:function (res) {Console.log (Res.data + "numbercolor-- 
--")    _this.setdata ({numberColor:res.data,})}}}, Inputvalue: ", data: {ISRANDOMCOLOR:TR ue,//default random src: ', numbercolor: ' #ff0000 ',//Default black danmulist: [{text: ' The Red bullet screen appearing in 1s ', color: ' #ff 0000 ', time:1}, {text: ' 2s green barrage ', color: ' #00ff00 ', Time:2}]}, Bindinpu Tblur:function (e) {this.inputvalue = E.detail.value}, Bindsenddanmu:function () {if (This.data.isRandomCol 
  OR) {var color = Getrandomcolor (); 
  else {var color = This.data.numberColor;  } this.videoContext.sendDanmu ({text:this.inputValue, color:color})}, Videoerrorcallback:function (e) {console.log (' video error message: ') Console.log (e.detail.errmsg)},//Select Color page selectcolor:function () {Wx.naviga Teto ({url: ' ... /selectcolor/selectcolor ', success:function (res) {//success}, Fail:function () {//fail} 
  , Complete:function () {  Complete}})},//switch whether Switchchange:function (e) {this.setdata ({Israndomcolor:e.detail 
 . Value}}})

4.selectcolor.wxml

<span style= "FONT-SIZE:24PX;" ><!--selectcolor.wxml--> 
<view class= "page" > 
  <view class= "PAGE__BD" > 
    <view class= "Weui-grids" > 
      <block wx:for-items= "{{color}}" > <view class= "Weui-grid" data-number= "{ 
        { Item.number}} "bindtap=" Selectcolor > 
          <view class= "Weui-grid__icon" style= "Background:{{item.number}"/ > 
        </view> 
      </block> 
    </view> 
  </view> 
</view></span> 

5.selectcolor.wxss

/**selectcolor.wxss**/ 
. weui-grids { 
 border-top:1rpx solid #D9D9D9; 
 Border-left:1rpx solid #D9D9D9; 
Weui-grid { 
 position:relative; 
 Float:left; 
 Padding:20rpx 20rpx; 
 width:20%; 
 Box-sizing:border-box; 
 Border-right:1rpx solid #D9D9D9; 
 Border-bottom:1rpx solid #D9D9D9; 
weui-grid_active { 
 background-color: #ccc; 
} 
. Weui-grid__icon { 
 display:block; 
 WIDTH:100RPX; 
 HEIGHT:100RPX; 
 margin:0 Auto; 
 box-shadow:3px 3px 5px #bbb; 
   
} 
. Weui-grid__label { 
 margin-top:5px; 
 Display:block; 
 Text-align:center; 
 Color: #000000; 
 font-size:14px; 
 White-space:nowrap; 
 text-overflow:ellipsis; 
 Overflow:hidden; 
} 

6.selectcolor.js

/selectcolor.js//Get application instance var app = Getapp () Page ({data: {color: [{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  : One, color: ' Blue Violet ', Number: ' #9F5F9F '}, {key:12, color: ' Brass color ', Number: ' #B5A642 '}, {key:13, color: '  Bright Gold ', Number: ' #D9D919 '}, {key:14, color: ' Brown ', Number: ' #A67D3D '}, {key:15, color: ' Bronze ', Number:  ' #8C7853 '}, {key:16, color: ' 2nd bronze ', Number: ' #A67D3D '}, {key:17, color: ' Sergeant's Uniform Blue ', #: ' #5F9F9F ' }, {key:18, colOr: ' Cold copper ', Number: ' #D98719 '}, {key:19, color: ' Copper color ', Number: ' #B87333 '}, {key:20, color: ' Coral red ', Nu  Mber: ' #FF7F00 '}, {key:21, color: ' Violet Blue ', Number: ' #42426F '}, {key:22, color: ' Dark brown ', Number: ' #5C4033 ' }, {key:23, color: ' Dark green ', Number: ' #2F4F2F '}, {key:24, color: ' Dark copper greens ', Number: ' #4A766E '}, {Ke y:25, color: ' Deep olive green ', Number: ' #4F4F2F '}, {key:26, color: ' Deep orchid ', Number: ' #9932CD '}, {key:27, color : ' Dark purple ', Number: ' #871F78 '}, {key:28, color: ' Deep slate blue ', Number: ' #6B238E '}, {key:29, color: ' Deep lead Gray ', n Umber: ' #2F4F4F '}, {key:30, color: ' Dark brown ', Number: ' #97694F '}, {key:32, color: ' Dark green pine stone ', Number: ' #70 
 
   93DB '}, {key:33, color: ' Dark wood ', Number: ' #855E42 '}, {key:34, color: ' Light gray ', Number: ' #545454 '},  {key:35, color: ' Grey rose red ', Number: ' #856363 '}, {key:36, color: ' feldspar color ', Number: ' #D19275 '}, {key:37, Color: ' Brick ', Number: ' #8E2323 '}, {key:38, color: ' Forest green ', Number: ' #238E23 '}, {key:39, color: ' Golden ', Number: ' #CD7F32 '},  {key:40, color: ' Bright yellow ', Number: ' #DBDB70 '}, {key:41, color: ' Gray ', Number: ' #C0C0C0 '}, {key:42, Color: ' Copper green ', Number: ' #527F76 '}, {key:43, color: ' Green yellow ', Number: ' #93DB70 '}, {key:44, color: ' Hunter green ', Number: ' #215E21 '}, {key:45, color: ' Indian red ', Number: ' #4E2F2F '}, {key:46, color: ' Earthy yellow ', Number: ' #9 
 
   f9f5f '}, {key:47, color: ' Light blue ', Number: ' #C0D9D9 '}, {key:48, color: ' Light gray ', 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: ' CSCL blue ', Number: ' #32CD99 '}, {key:64, color: ' Medium Blue ', Number: ' # 3232CD '}, {key:Color: ' Forest green ', Number: ' #6B8E23 '}, {key:66, color: ' Bright yellow ', Number: ' #EAEAAE '}, {key:67, color: ' Orchid Color ', Number: ' #9370DB '}, {key:68, color: ' CSCL green ', Number: ' #426F42 '}, {key:69, color: ' Slate blue ', Nu Mber: ' #7F00FF '}, {key:70, color: ' Spring green ', Number: ' #7FFF00 '}, {key:71, color: ' Turquoise ', Number: ' #70D 
 
   BDB '}, {key:72, color: ' Magenta ', Number: ' #DB7093 '}, {key:73, color: ' Wood color ', Number: ' #A68064 '}, {key:74, color: ' Deep Blue ', Number: ' #2F2F4F '}, {key:75, color: ' Navy blue ', Number: ' #23238E '}, {key:76, C  Olor: ' Neon basket ', Number: ' #4D4DFF '}, {key:77, color: ' Neon pink ', Number: ' #FF6EC7 '}, {key:78, color: ' New deep Blue ', Number: ' #00009C '}, {key:79, color: ' New brown ', Number: ' #EBC79E '}, {key:80, color: ' Dark golden ', Number: ' #CFB53B '}, {key:81, color: ' Orange ', Number: ' #FF7F00 '},],}, Onload:function () {},//Click to close the Color selection page Face Selectcolor:functioN (e) {var number = E.currenttarget.dataset.number; Console.log ("Number: + number") try {wx.setstoragesync (' Numbercolor ', Number)} catch (e) {} Wx.navigat 
    Eback ({delta:1,//Rollback front Delta (default 1) page Success:function (res) {//success}, Fail:function () {  Fail}, Complete:function () {//Complete}}}})

Demo Code Download: Demo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.