微信小程序开发之视频video组件报错:渲染层网络层错误

tech2022-09-22  64

微信小程序开发之视频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('') } })
最新回复(0)