微信小程序视频实例，开发小程序视频实例

　　微信小程序视频实例，开发小程序视频弹幕实例送给有需要的人，以下是小编整理的一则微信小程序视频弹幕实例，具体的微信小程序代码都已经相信的列出来了，有兴趣的朋友就一起来看看吧。

　　微信小程序视频实例：

　　微信小程序视频的效果如下：

接下来小编会以微信小视频弹幕为例，告诉大家开发微信小程序视频。

　　微信已经封装的非常好.我这里只用了很简单的几个属*

　　由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.

　　微信小程序视频列表的元素:

　　text: '第 1s 出现的红色弹幕',//文本

　　color: '#ff0000',//颜色

　　time: 1//发送的时间

　　2.选择弹幕颜色

　　从上面的弹幕列表元素可以看出,微信并没有给开发者太多的自定义空间.文本?时间?颜色?

　　也就颜色还能玩出点花样吧.

　　于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧

　　微信小程序代码如下：

　　01./**index.wxss**/

　　02..weui-cells {

　　03.position: relative;

　　04.margin-top: 1.17647059em;

　　05.background-color: #FFFFFF;

　　06.line-height: 1.41176471;

　　07.font-size: 17px;

　　08.ckground}

　　09..weui-cells:before {

　　10.content: " ";

　　11.position: absolute;

　　12.left: 0;

　　13.top: 0;

　　14.right: 0;

　　15.height: 1px;

　　16.border-top: 1rpx solid #D9D9D9;

　　17.color: #D9D9D9;

　　18.top: 0;

　　19. absolute;

　　20..weui-cells:after {

　　21.content: " ";

　　22.position: absolute;

　　23.left: 0;

　　24.bottom: 0;

　　25.right: 0;

　　26.height: 1px;

　　27.border-bottom: 1rpx solid #D9D9D9;

　　28.color: #D9D9D9;

　　29.}

　　30..weui-cells_after-title {

　　31.margin-top: 0;

　　32.}

　　33..weui-cell__bd {

　　34.-webkit-box-flex: 1;

　　35.-webkit-flex: 1;

　　36.flex: 1;

　　37.}

　　38..weui-cell__ft {

　　39.text-align: right;

　　40.color: #999999;

　　3.index.js

　　001.//index.js

　　002.function getRandomColor() {

　　003.let rgb = []

　　004.for (let i = 0; i < 3; ++i) {

　　005.let color = Math.floor(Math.random() * 256).toString(16)

　　006.color = color.length == 1 ? '0' + color : color

　　007.rgb.push(color)

　　008.}

　　009.return '#' + rgb.join('')

　　010.}

　　011.

　　012.Page({

　　013.onLoad: function () {

　　014.var _this = this;

　　015.//获取屏幕宽高

　　016.wx.getSystemInfo({

　　017.success: function (res) {

　　018.var windowWidth = res.windowWidth;

　　019.//video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

　　020.var videoHeight = (225 / 300) * windowWidth//屏幕高宽比

　　021.console.log('videoWidth: ' + windowWidth)

　　022.console.log('videoHeight: ' + videoHeight)

　　023._this.setData({

　　024.videoWidth: windowWidth,

　　025.videoHeight: videoHeight

　　026.})

　　027.}

　　028.})

　　029.},

　　030.onReady: function (res) {

　　031.this.videoContext = wx.createVideoContext('myVideo')

　　032.},

　　033.onShow: function () {

　　034.var _this = this;

　　035.//获取年数

　　036.wx.getStorage({

　　037.key: 'numberColor',

　　038.success: function (res) {

　　039.console.log(res.data + "numberColor----")

　　040._this.setData({

　　041.numberColor: res.data,

　　042.})

　　043.}

　　044.})

　　045.},

　　046.inputValue: '',

　　047.data: {

　　048.isRandomColor: true,//默认随机

　　049.src: '',

　　050.numberColor: "#ff0000",//默认黑色

　　051.

　　052.danmuList: [

　　053.{

　　054.text: '第 1s 出现的红色弹幕',

　　055.color: '#ff0000',

　　056.time: 1

　　057.},

　　058.{

　　059.text: '第 2s 出现的绿色弹幕',

　　060.color: '#00ff00',

　　061.time: 2

　　062.}

　　063.]

　　064.},

　　065.bindInputBlur: function (e) {

　　066.this.inputValue = e.detail.value

　　067.},

　　068.bindSendDanmu: function () {

　　069.if (this.data.isRandomColor) {

　　070.var color = getRandomColor();

　　071.} else {

　　072.var color = this.data.numberColor;

　　073.}

　　074.

　　075.this.videoContext.sendDanmu({

　　076.text: this.inputValue,

　　077.color: color

　　078.})

　　079.},

　　080.videoErrorCallback: function (e) {

　　081.console.log('视频错误信息:')

　　082.console.log(e.detail.errMsg)

　　083.},

　　084.//选择颜色小程序页面

　　085.selectColor: function () {

　　086.wx.navigateTo({

　　087.url: '../selectColor/selectColor',

　　088.success: function (res) {

　　089.// success

　　090.},

　　091.fail: function () {

　　092.// fail

　　093.},

　　094plete: function () {

　　095.// complete

　　096.}

　　097.})

　　098.},

　　099.//switch是否选中

　　100.switchChange: function (e) {

　　101.this.setData({

　　102.isRandomColor: e.detail.value

　　103.})

　　104.}

　　105.})

　　微信小程序视频实例双手献给有需要的人，如果你要开发微信小程序视频，那么以上的微信小程序视频实例对您开发微信小程序视频会有帮助哦。大家要来多多的关注微小乔哦。感谢你的支持。

　　微信小程序视频点播怎么使用?

　　微信小视频怎么带音乐具体步骤

　　微信小程序视频是什么?有哪些小程序视频