微信html5 video自动播放,【报Bug】video 默认浏览器,微信H5页面无法播放

本文介绍了在uniapp环境下,使用HBuilderX开发H5/PC应用时,如何实现视频弹幕功能。详细阐述了代码实现过程,包括设置弹幕列表、发送弹幕的方法以及错误回调处理。在实际运行中遇到点击播放报错的问题,开发者可以通过错误回调进行调试和解决。
摘要由CSDN通过智能技术生成

产品分类:

uniapp/H5

PC开发环境操作系统:

Mac

PC开发环境操作系统版本号:

10.15.3

HBuilderX类型:

正式

HBuilderX版本号:

2.7.7

浏览器平台:

微信内置浏览器

浏览器版本:

7.0.14

项目创建方式:

HBuilderX

操作步骤:

@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>

弹幕内容

发送弹幕

export default {

data() {

return {

src: '',

danmuList: [{

text: '第 1s 出现的弹幕',

color: '#ff0000',

time: 1

},

{

text: '第 3s 出现的弹幕',

color: '#ff00ff',

time: 3

}

],

danmuValue: ''

}

},

onReady: function(res) {

// #ifndef MP-ALIPAY

this.videoContext = uni.createVideoContext('myVideo')

// #endif

},

methods: {

sendDanmu: function() {

this.videoContext.sendDanmu({

text: this.danmuValue,

color: this.getRandomColor()

});

this.danmuValue = '';

},

videoErrorCallback: function(e) {

// uni.showModal({

// content: e.target.errMsg,

// showCancel: false

// })

console.log(e)

},

getRandomColor: function() {

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('')

}

}

}

```

预期结果:

wu

实际结果:

点击播放报错

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值