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

微信小程序开发之视频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 (中国标准时间) 渲染层网络层错误”
如图:
微信小程序开发之视频video组件报错:渲染层网络层错误_第1张图片
微信小程序开发之视频video组件报错:渲染层网络层错误_第2张图片

// 代码

	海量视频任你点击
	
	
		
	

已解决,但具体原因未知,大佬看见麻烦解个答,谢了。

2021-01-04更

<video
  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/d044a0fb-ae98-4c86-bbdb-1386d044765f.MP4"
  enable-play-gesture="{
     {true}}"></video>

换了一个视频链接就好了。

在播放视频的基础上增加了弹幕功能:
(效果图)样式顺便写的 请忽略样式丑陋
微信小程序开发之视频video组件报错:渲染层网络层错误_第3张图片
微信小程序开发之视频video组件报错:渲染层网络层错误_第4张图片

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

你可能感兴趣的:(微信小程序,小程序)