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

2023-10-26

微信小程序开发之视频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('')
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • h5跳转小程序

    h5跳转小程序 我的所写的项目是react框架 在h5跳转小程序时 需要引入wx jssdk 具体操作看我上篇文章 https blog csdn net weixin 45315794 article details 122448088
  • Spring中@Autowired注解、J2EE @Resource注解的区别

    Spring不但支持自己定义的 Autowired注解 还支持几个由JSR 250规范定义的注解 它们分别是 Resource PostConstruct以及 PreDestroy Resource的作用相当于 Autowired 只不过
  • Android逆向工程:MIUI系统大揭秘:去不掉的小米账号!

    哈喽小伙伴们大家好 欢迎继续学习探讨MIUI系统的安全防范知识 在上篇博客中 Android逆向工程 带你领略MIUI系统的账号安全防范机制 账号是从哪里获取的 我们了解到了MIUI系统通过对关键代码进行封装进系统内 对外采用统一调用接口的
  • Web集群部署实战

    Web集群部署实战 Web集群架构图 系统规划 实验要求 购买一个 SFS 服务 以及 3 台云主机 部署 apache php 的网站 购买云主机3台 部署网页数据 挂载 SFS 服务到跳板机 root ecs proxy dnf ins
  • Docker

    参考资料 官方文档 Redirecting 官方文档超级详细 仓库地址 Docker Hub 发布到仓库 git pull push b站教程 狂神说Java Docker最新超详细版教程通俗易懂 哔哩哔哩 bilibili 这个教程非常简

随机推荐

  • 详解Python迭代器,生成器,装饰器

    文章目录 迭代器 迭代器协议 迭代器协议实现斐波那契数列 生成器 装饰器 装饰器进阶骚操作 迭代器 简介 迭代器是python里面可以记住遍历位置的对象 迭代器只能往前不能往后 使用iter 创建一个迭代器 使用next 返回一个迭代器里面
  • 嵌入式--RTC实时时钟原理及相关库函数功能

    一 RTC实时时钟原理 1 RTC实时时钟是一个独立的定时器 可以提供日期时间或者闹钟的功能 其核心是通过32位可编程计数器RTC CNT计数来进行时间配置 2 图1中RTCCLK为RTC时钟源 其主要是由外部晶振提供时钟源 一般为32 7
  • 数据结构单链表——建立单链表

    0 建立单链表前的工作 include
  • CVE-2022-22947 Spring Cloud Gateway RCE漏洞复现分析

    目录 一 基本介绍 1 微服务架构与Spring Cloud 2 Spring Cloud生态 3 网关作用 4 Spring Cloud Gateway使用 5 Spring Cloud Gateway概念 5 1 路由 Route 5
  • 群晖nas上部署gitea后修改IP地址

    事件 今天 我在nas的套件中心中发现了Gitea这个套件 想到自己的代码都是保存在GitHub或者Gitee上面的 于是乎我边在nas上面装了这个套件 装备将代码在nas里面也备份一份 我的nas所在网络没有公网IP 用内网穿透形式弄的
  • JAVA学习笔记(1)与日期相关的类相关知识记录

    介绍Java涉及日期的类 Date类 获取日期对象 Calendar类 获取日期的特定部分 时分秒 Date类 构造函数 一共有两个构造函数Date 使用当前日期和时间初始化对象 Date long millisec 接受一个参数 该参数是
  • Leetcode 刷题笔记(三) —— 数组类型解题方法三:滑动窗口

    文章目录 系列文章目录 题录 209 长度最小的子数组 904 水果成篮 76 最小覆盖子串 困难 总结 系列文章目录 一 数组类型解题方法一 二分法 二 数组类型解题方法二 双指针法 三 数组类型解题方法三 滑动窗口 四 数组类型解题方法
  • 多线程、异步爬取数据(优化篇)

    爬虫优化 一般方法 多线程 异步 scrapy框架 理解要点 scrapy文件目录 middleware py jd refer py item py pipeline py debug py 一般方法 京东商品数据爬取 91 403s p
  • DOS操作命令

    DOS操作命令 1 cleanmgr 打开磁盘清理工具 2 compmgmt msc 计算机管理 3 conf 启动系统配置实用程序 4 charmap 启动字符映射表 5 calc 启动计算器 6 chkdsk exe Chkdsk磁盘检
  • 如何检测手机当前为“桌面”(desktop)状态

    介绍 一些桌面软件会在用户把手机切换到桌面 desktop 时显示一些特定的信息 如图片 滚动文字等 达到一种个性桌面的效果 这里就介绍一种检测 桌面 的方法 S60 2nd的 桌面 是电话应用 S60 3rd的 桌面 是Idle exe
  • 声明式事务源码解析--- Spring源码从入门到精通(二十六)

    上篇文章介绍了事务代码的实例 声明式事务 Spring源码从入门 到精通 二十五 这篇文章主要介绍事务源码解析 一 EnableTransactionManagerment 里面import一个TransactionManagementCo
  • 【RDMA】技术详解(一):RDMA概述

    目录 0 前言 一 技术背景 1 传统的 TCP IP 网络通信的弊端 2 新的网络通信技术 TOE and RDMA 2 1 TOE TCP IP协议处理工作从CPU转移到网卡 2 2 RDMA 绕过CPU 数据直接 传 到对端内存 二
  • linux命令 uname -r 和 uname -a 的详解

    1 uname r 显示操作系统的发行版号2 uname a 显示系统名 节点名称 操作系统的发行版号 内核版本等等 系统名 Linux 节点名称 qyw 操作系统的发行版号 3 10 0 957 21 3 el7 x86 64 命名规则
  • Nginx负载均衡session会话保持方法

    负载均衡时 为了保证同一用户session会被分配到同一台服务器上 可以使用以下方法 1 使用cookie 将用户的session存入cookie里 当用户分配到不同的服务器时 先判断服务器是否存在该用户的session 如果没有就先把co
  • Java 秒杀方案(下)

    技术点 前端 Thymeleaf Bootstrap Jquery 后端 SpringBoot MyBatisPlus Lombok 中间件 Redis RabbitMQ 秒杀方案简介 本短文完成项目搭建 分布式 Session 和秒杀功能
  • Linux DDR3寻址地址映射

    1 相关原理 DDR3内部相当于存储表格 和表格的检索相似 需要先指定 行地址 row 再指定列地址 column 这样就可以准确的找到需要的单元格 对于DDR3内存 单元格称为基本存储单元 也就是每次能从该DDR3芯片读取的最小数据 存储
  • C语言编译过程详解

    前言 C语言程序从源代码到二进制行程序都经历了那些过程 本文以Linux下C语言的编译过程为例 讲解C语言程序的编译过程 编写hello world C程序 hello c include
  • 【mmYOLO】促进视觉项目落地,主打工程经验和实用。从原理配置到属性设置,从模型训练到模型评测

    MMYOLO 是一个基于 PyTorch 和 MMDetection 的 YOLO 系列算法开源工具箱 它是 OpenMMLab 项目的一部分 目前支持的任务有目标检测 旋转框目标检测 具有如下三个特性 统一便捷的算法评测 MMYOLO 统
  • MYSQL 根据不同字段的汇总相同字段的总数

    需求 汇总一个用户不同支付方式的购买的总杯数 buy num 杯数 pay code 支付方式 pay name 支付名称 pay status 支付状态 ms order 订单表 ms user 用户表 SELECT u id pay n
  • 微信小程序开发之视频video组件报错:渲染层网络层错误

    微信小程序开发之视频video组件报错 渲染层网络层错误 视频正常播放 暂停 使用正常 但报错 From server 61 147 235 115 console error VM1074 1 anonymous VM1101 2 VM1