video.js 报错:your browser did not support

2023-10-26

video.js 报错:The media playback was aborted due to a corruption problem or because the media used features your browser did not support

最近做H5页面实现加载直播流的功能。在pc浏览器上一切正常,但是在微信浏览器中打开页面就提示The media playback was aborted due to a corruption problem or because the media used features your browser did not support.
img

解决办法:在加载视频的时候使用异步加载-----> setTimeout, 以下是完整代码:

<template>
  <div>
    <video
      id="video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      muted
      controls
    >
      <source
        src="http://ivi.bupt.edu.cn/hls/cctv2.m3u8"
        type="application/x-mpegURL"
      />
    </video>
  </div>
</template>
<script>
import Videojs from "video.js";
import "videojs-contrib-hls";
export default {
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.getVideo();  // 使用 setTimeout 是关键
    });
  },
  methods: {
    getVideo() {
      this.player = Videojs("video", {
        bigPlayButton: true,
        autoplay: false,
        controls: true,
        width: 300,
        preload: "auto",
      });
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>
<style lang='scss'>
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

video.js 报错:your browser did not support 的相关文章

随机推荐

  • 在局域网部署自己的Docker私有仓库

    本文参考自局域网部署Docker 从无到有创建自己的Docker私有仓库 内网用户由于无法链接互联网 所以无法像在线用户那样直接使用pull指令从Docker Hub上下载镜像 再查看了很多资料之后 发现可以使用文件操作在局域网上部署Doc
  • 手动搭建webase(3)——WeBASE管理平台

    1 依赖环境 Nginx安装 拉取代码 代码可以放在 data下面 执行命令 git clone https github com WeBankFinTech WeBASE Web git 若网络问题导致长时间无法下载 可尝试以下命令 gi
  • 从零开始搭建物联网平台(1):开篇

    前言 读大学的时候学的是物联网工程 大概是在大二的时候开始接触单片机 那时候特喜欢捣鼓那些东西 就觉得特别酷有极客范 还记得第一次做物联网相关的是一个远程控制的开关 第一次调通的时候真的很兴奋 啥也没干就挂在那用手机控制继电器听咔嗒咔哒的声
  • 在不同的维度中,态势感知存在着各自的规律和特点

    在不同的维度中 态势感知可以具有不同的规律和特点 以下是一些常见的维度和相关规律 时间维度 态势感知随时间的变化可以呈现出趋势和周期性 趋势是指态势感知在长期内的整体发展方向 可以是增长 下降或保持稳定 周期性是指态势感知在一定时间内重复出
  • CSS 学成网(二)

    学成网小圆点 小圆点模块 circle width 180px height 22px background color pink position absolute bottom 10px left 50 margin left 90px
  • 字节序网络序大小端问题

    基本概念 主机字节序 就是自己的主机内部 内存中数据的处理方式 可以分为两种 大端字节序 big endian 按照内存的增长方向 高位数据存储于低位内存中 小端字节序 little endian 按照内存的增长方向 高位数据存储于高位内存
  • Kafka复习计划 - Kafka基础知识以及集群参方案和参数

    Kafka复习计划 Kafka基础知识以及集群参方案和参数 前言 一 Kafka 相关术语 1 1 实现高可用的手段 1 2 Kafka的三层消息架构 1 3 Kafka如何持久化数据 1 4 常见问题 二 Kafka集群部署方案 2 1
  • 链码调试方法(在fabric-sample下)

    链码调试方法 在fabric sample下 启动网络 1 cd fabric samples chaincode docker devmode 1 docker compose f docker compose simple yaml u
  • YOLO v2(单尺度)

    文章目录 YOLO v2 单尺度 细粒度 fine grained 特征 锚框 Anchor 锚框 Anchor 和损失函数 Loss Anchor与YOLO YOLO v2 单尺度 能解决稠密物体的检测 但无法解决多尺度物体的检测 细粒度
  • 剑指 Offer 64. 求1+2+…+n----思路和心得分享

    对于这道题 我第一个反应就是高斯的算法 首位相加乘以一半的数量 奇数要加中间值 class Solution public int sumNums int n 求出中间值 int key n 2 设置结果 int sum 0 如果是奇数 加
  • 超全实用

    汽车领域 金融领域 由于篇幅有限 为了阅读体验本文只截取金融和汽车领域的数据存储期限汇总 其他领域如 通用 电商 工业 化妆品 医疗 游戏等行业要求在单独的汇总Excel中 可私信找我要 暗号 数据存储
  • Android 友盟集成华为,小米,魅族推送的基础实现与注意事项

    因为目前正处于实习阶段 所以公司安排了解一下华为 小米 魅族 友盟的推送 并将其集成在一个APP上 为此特地写一篇博客记录集成过程中需要注意的一些事项 如果想进行集成 建议还是先了解一下华为 小米 魅族它们自己厂商的推送服务及文档 毕竟集成
  • opencv不规则裁剪

    首先是一张卡通T袖十香 使用labelme标注 然后使用json里面标注的点坐标去裁剪 裁剪后的图片 下面附上代码 import cv2 import numpy as np opencv不规则裁剪 def ROI byMouse img
  • windows下查看端口的方法

    小编的同事昨天遇到了一个问题 在运行某个程序的时候 总提示说程序端口被占用 不能运行 这可就着急了 今天小编一系列的查看 解决了问题 今天就来教大家windows如何查看端口 从而知道端口被哪个程序占用了 然后在进行处理即可 下面我们一起来
  • VINS - Fusion GPS/VIO 融合 二、数据融合

    https zhuanlan zhihu com p 75492883 一 简介 源代码 VINS Fusion 数据集 KITTI 数据 程序入口 globalOptNode cpp 二 程序解读 2 1 主函数 int main int
  • 芯片的ATE测试简介

    ATE Automatic Test Equipment 即自动测试设备 它用于芯片大规模生产测试 保障稳健 质量 成本和进度 的供应 ATE测试基本的覆盖理念 主要是结构性测试 即Structure Test 再辅以一定的功能和性能测试
  • ch4 报错修正 & Sophus使用

    ch4 报错 修正 1 添加Eigen头文件 include directories usr include eigen3 2 include sophus so3 hpp include sophus se3 hpp 3 大量报错但都与S
  • CentOS 7安装OpenMPI

    文章目录 一 下载OpenMPI源码 二 解压缩OpenMPI源码 三 安装OpenMPI 四 配置环境变量 五 验证安装 参考资料 一 下载OpenMPI源码 wget https download open mpi org releas
  • 微前端框架 之 qiankun

    文章目录 一 介绍 1 1 qiankun的优点 特点 二 源码解读 2 1 框架目录结构 2 2 有料的 package json 2 3 示例项目中的主应用 2 4 启动示例项目 三 示例项目 3 1 主应用 3 1 1 webpack
  • video.js 报错:your browser did not support

    video js 报错 The media playback was aborted due to a corruption problem or because the media used features your browser d