微信小程序开发之视频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 (中国标准时间) 渲染层网络层错误”
如图:
在这里插入图片描述
在这里插入图片描述

// 代码
<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('')
  }
})
  • 8
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值