微信小程序开发之视频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更

<videosrc="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 : colorrgb.push(color)}return '#' + rgb.join('')}
})

微信小程序开发之视频video组件报错：渲染层网络层错误相关推荐

微信小程序渲染层网络错误_小程序使用video报错渲染层网络层错误
我用官方的文档,就换了个图片和视频地址.报错渲染层网络层错误.视频可以看,功能也可以用,但是看到这报错,台烦人了. https://uniapp.dcloud.io/component/cover-v ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序激励式视频广告组件使用
微信小程序搜索:短视频去水印解析目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1. Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示这里介绍 ...
微信小程序开发扫条码wx.scanCode报scanCode:fail
用小程序开发工具扫码报错scanCode:fail,使用真机调试可以识别.测试后发现是因为条码文件没有留足边界导致模拟器扫码失败.比如条码的条纹的长宽为:50px*30px.那么这个图片文件的长度应该 ...
微信小程序-iphone打开页面空白，报错Miniprogramerror Syntaxerror...
使用uniapp开发微信小程序,使用安卓手机打开小程序没问题,使用开发工具的真机调试,iphone打开小程序就出现页面空白,并且控制台报错: Miniprogramerror Syntaxerror ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序开发中调用button组件添加微信客服功能
个人比较喜欢这个解决方案,原因一是由腾讯官方运营,比较稳定.二是确实很方便啊,直接用微信回复就好了.核心代码就一行,如下 <button open-type="contact" ...

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

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

微信小程序开发之视频video组件报错：渲染层网络层错误相关推荐

最新文章

热门文章