效果图:
官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
demo代码:
<view class="page-body">
<view class="page-section tc">
<video class="{{isFiexd?'video-fixed':''}}" id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" picture-in-picture-mode="{{['push','pop']}}" enable-danmu danmu-btn controls></video>
<view class="weui-cells">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">弹幕内容</view>
</view>
<view class="weui-cell__bd">
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="btn-area">
<button bindtap="bindToFiexd" class="page-body-button" type="primary">{{isFiexd?'返回正常模式':'当前页面小窗'}}</button>
<button bindtap="bindNavPage" class="page-body-button" type="primary">跳转其它页面</button>
<button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
<button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
<button bindtap="bindPause" class="page-body-button" type="primary">暂停</button>
</view>
</view>
</view>
function getRandomColor () {
const 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('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
bindPlay: function() {
this.videoContext.play()
},
bindPause: function() {
this.videoContext.pause()
},
bindNavPage() {
this.videoContext.play(); // 必须是播放中小窗模式才会生效
wx.navigateTo({
url: '/pages/demo1',
})
},
bindToFiexd() {
this.setData({
isFiexd: !this.data.isFiexd
});
},
videoErrorCallback: function(e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})
@import "../lib/weui.wxss";
.weui-cells{
margin-top: 80rpx;
text-align: left;
}
.weui-label{
width: 5em;
}
.page-body-button {
margin-bottom: 30rpx;
}
.video-fixed {
position: fixed;
bottom: 180rpx;
right: 20rpx;
width: 300rpx;
height: 200rpx;
}
微信交流社区参考链接: https://developers.weixin.qq.com/community/develop/doc/000ea2fb128d103aaa2c872525b000
标签：function,视频,videoContext,窗口,color,text,rgb,播放,弹幕 From： https://www.cnblogs.com/520BigBear/p/17296242.html