微信小程序开发之视频video组件报错:渲染层网络层错误
视频正常播放、暂停,使用正常,但报错
“From server 61.147.235.115
console.error @ VM1074:1
(anonymous) @ VM1101:2
VM1102:1 Thu Sep 03 2020 09:50:58 GMT+0800 (中国标准时间) 渲染层网络层错误”
如图:
// 代码
<view>
<text>海量视频任你点击</text>
<view><video src="http://f.video.weibocdn.com/0038dCxWgx07G41A12d201041200dxGh0E010.mp4?label=mp4_hd&template=844x480.25.0&trans_finger=1621fcd5d40969f1c74e6b06e52fcd54&media_id=4543974036406326&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=5Bm3J8&ab=966-g1&Expires=1599100102&ssig=oH%2F7oMTRHy&KID=unistore,video" enable-play-gesture="{{true}}"></video></view>
<view>
<video id="myVideo" src="http://f.video.weibocdn.com/001rKedngx07G4iVJwne01041200LdHQ0E010.mp4?label=mp4_hd&template=852x480.25.0&trans_finger=d8257cc71422c9ad30fe69ce9523c87b&media_id=4544037395562518&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=5Bm3J8&ab=966-g1&Expires=1599100189&ssig=yvXEOzExzW&KID=unistore,video" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video>
</view>
</view>
已解决,但具体原因未知,大佬看见麻烦解个答,谢了。
2021-01-04更
<video
src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/d044a0fb-ae98-4c86-bbdb-1386d044765f.MP4"
enable-play-gesture="{{true}}"></video>
换了一个视频链接就好了。
在播放视频的基础上增加了弹幕功能:
(效果图)样式顺便写的 请忽略样式丑陋
// wxml
<video id="myVideo" class="video_view" src="{{videoUrl}}" enable-danmu danmu-list="{{danmuList}}" danmu-btn="true"
autoplay loop bindfullscreenchange="bindfullscreenchange">
<view class="btn_box">
<view class="btn_danmu" catchtap="showDialog">弹幕</view>
</view>
<view class="view_bg" hidden="{{hiddenDanmu}}">
<input class="input_text" type="text" placeholder="君子一言 驷马难追" value="{{textValue}}" bindinput="bindInput"
maxlength="30" />
<view class="btn_sure" catchtap="bindSendDanmu">发送</view>
</view>
</video>
// wxss
.video_view {
width: 100vw;
height: 50vh;
display: block;
}
.btn_box {
position: absolute;
right: 15rpx;
bottom: 80rpx;
}
.btn_danmu {
width: 80rpx;
height: 80rpx;
background: #87CEFA;
border-radius: 50%;
font-size: 28rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
.view_bg {
width: 520rpx;
height: 120rpx;
background: #87CEFA;
border-radius: 60rpx 60rpx 0 60rpx;
position: absolute;
right: 76rpx;
bottom: 148rpx;
display: flex;
justify-content: center;
align-items: center;
}
.input_text {
width: 250rpx;
height: 60rpx;
background: #d7f0ff;
border-radius: 12rpx;
font-size: 28rpx;
line-height: 60rpx;
padding: 0 12rpx;
}
.btn_sure {
width: 88rpx;
height: 60rpx;
background: #d7f0ff;
border-radius: 12rpx;
font-size: 28rpx;
line-height: 60rpx;
text-align: center;
margin-left: 12rpx;
color: #666;
}
// js
let videoContext = ''
Page({
/**
* 页面的初始数据
*/
data: {
videoUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/d044a0fb-ae98-4c86-bbdb-1386d044765f.MP4",
danmuList: [{
text: '哈哈哈哈哈哈哈哈哈哈',
color: '#ff0000',
time: 1
}, {
text: '笑死我了',
color: '#ff00ff',
time: 3
}, {
text: '大头好可怜',
color: '#ff0000',
time: 3
}, {
text: '大头好可怜',
color: '#ff0000',
time: 3
}, {
text: '大头好可怜',
color: '#ff0000',
time: 2
}, {
text: '大头好可怜',
color: '#ff0000',
time: 5
}, {
text: '大头好可怜',
color: '#ff0000',
time: 8
}], //弹幕
textValue: '', // 弹幕输入值
hiddenDanmu: true, // 隐藏输入框
},
bindfullscreenchange(e) {
console.log(e)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.videoContext = wx.createVideoContext('myVideo')
},
// 显示隐藏弹幕输入
showDialog() {
this.setData({
hiddenDanmu: !this.data.hiddenDanmu
})
},
// 输入弹幕
bindInput(e) {
this.setData({
textValue: e.detail.value.replace(/\s+/g, ""),
})
},
// 发送弹幕
bindSendDanmu() {
if (!this.data.textValue) {
return
}
this.videoContext.sendDanmu({
text: this.data.textValue,
color: this.getRandomColor()
})
wx.showToast({
title: '已发送',
icon: 'none'
})
this.setData({
textValue: '',
hiddenDanmu: true
})
},
// 弹幕颜色
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('')
}
})