当前位置: 首页 > news >正文

vue video播放m3u8监控视频

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错

直接添加如下代码即可

  html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false}

下面是完整组件示例 

<template><div><videostyle="border-radius: 8px; margin: 0 auto; overflow: hidden"id="my-video"class="video-js vjs-default-skin"controlsautoplaymutedpreload="auto"width="300"ref="videoPlayer"></video></div>
</template><script setup>import { ref, onMounted, onBeforeUnmount, watch } from 'vue';import videojs from 'video.js';import 'video.js/dist/video-js.css';const props = defineProps({srcUrl: {type: String,required: true}});const videoPlayer = ref(null);let player = null;const getVideo = () => {console.log('11111111');player = videojs(videoPlayer.value,{bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,controlBar: true,html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false}},function onPlayerReady() {console.log('视频加载成功');this.src({ type: 'application/x-mpegURL', src: props.srcUrl });this.play();});};onMounted(() => {getVideo();});watch(() => props.srcUrl,(newSrcUrl) => {if (player) {player.src({ type: 'application/x-mpegURL', src: newSrcUrl });player.play();}});onBeforeUnmount(() => {if (player) {player.dispose();}});
</script><style scoped>video {border-radius: 8px;margin-bottom: 24px;}
</style>

 

相关文章:

vue video播放m3u8监控视频

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错 直接添加如下代码即可 html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false} 下面是完整组件示例 <template><div>…...

uniapp 获取签名证书 SHA1 自有证书签名打包

1.登录你的Dcloud 账户 2.找到我的应用菜单 3.点开某个应用 4.查看证书详情&#xff0c;里面有SHA1 和别名&#xff0c;密码&#xff0c;下载证书用于云打包&#xff0c;可以选择自有证书&#xff0c;输入别名&#xff0c;密码打包...

Open3d开发点云标注工具问题总结(二)

前面我们介绍了使用AABB方式来框选点云&#xff0c;但这种方式还是不够直观&#xff0c;我们的构想是设计一个和o3d.visualization.VisualizerWithEditing的点云框选方法一样的软件&#xff0c;因此&#xff0c;博主想到利用投影的形式进行解决&#xff1a; 具体的&#xff0c;…...

【FreeRTOS】

报错&#xff1a; 使用STM32cubemx自动生成freertos选项V2报错&#xff0c;V1不报错 …/Middlewares/Third_Party/FreeRTOS/Source/CMSIS_RTOS_V2/freertos_os2.h(31): 解决 修改cubemx配置&#xff0c;将V1.8.6改选为V1.8.5后编译不再报错...

洛谷 P4995:跳跳! ← 贪心算法

【题目来源】https://www.luogu.com.cn/problem/P4995【题目描述】你是一只小跳蛙&#xff0c;你特别擅长在各种地方跳来跳去。 这一天&#xff0c;你和朋友小 F 一起出去玩耍的时候&#xff0c;遇到了一堆高矮不同的石头&#xff0c;其中第 i 块的石头高度为 hi&#xff0c;地…...

代理 IP 在 AI 爬虫中的关键应用

现如今&#xff0c;人工智能&#xff08;AI&#xff09;的发展日新月异&#xff0c;而数据作为驱动 AI 发展的关键要素&#xff0c;其重要性不言而喻。AI 爬虫作为获取大量数据的重要工具&#xff0c;在数据收集过程中发挥着至关重要的作用。而代理 IP 在 AI 爬虫中有着广泛而重…...

【Vercel】Vercel静态部署踩坑

背景 在现代的软件开发中&#xff0c;自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台&#xff0c;提供了与GitHub的无缝集成&#xff0c;使得开发者能够在每次提交代码后自动触发部署流程。然而&#xff0c;自动化部署过程中可能会遇到一些挑战&#xff0…...

【Spring】关于Spring中aware相关接口的作用

Aware 接口的回调方法是在 Bean 实例化之后调用的。具体来说&#xff0c;这些回调方法是在依赖注入完成后&#xff0c;但在 Bean 完全初始化之前调用的。这是 Spring 容器管理 Bean 生命周期的一部分 完成了属性赋值之后&#xff0c;Spring会执行一些回调&#xff0c;包括&…...

动态内存管理及RAII的简单应用

目录 一.程序启动所关联的内存分区 二.动态内存的申请和释放 三.将RAII思想融入代码 四.RAII思想的简单应用 一.程序启动所关联的内存分区 .dll文件是Dynamic Link Library&#xff08;动态链接库&#xff09;文件的缩写&#xff0c;它是一种共享库文件&#xff0c;包含…...

7、Vue2(一)

1.认识Vue 官网地址&#xff1a;https://v2.cn.vuejs.org/v2/guide/ Vue.js 是一套构建用户界面的渐进式框架。 Vue 2 是在2016年发布使用&#xff0c;2020是 vue3 才刚发布&#xff0c;时隔一年左右就已经将 vue3 作为了默认版本 尤雨溪&#xff0c;Vue.js和Vite的作者&…...

Chapter11

11.3 #include <stdio.h> #include <string.h> #define NUM_STUDENTS 40 #define NUM_SUBJECTS 3 // 学生结构体 typedef struct { int id; char name[50]; float scores[NUM_SUBJECTS]; float average; } Student; void inputData(Student studen…...

LLAMA2入门(一)-----预训练

Llama 2 是预训练和微调的LLM系列&#xff0c;Llama 2 和 Llama 2-Chat 模型的参数规模达到 70B。Llama 2-Chat 模型专门为对话场景进行了优化。 这是一个系列的文章&#xff0c;会分别从LLAMA2的预训练&#xff0c;微调&#xff0c;安全性等方面进行讲解。 1.数据来源 数据…...

使用poi-tl动态写入目录更新问题解决

在使用poi-tl动态写完word后&#xff0c;是无法更新目录的&#xff0c;使用poi-tl提供的插件也是不行的&#xff0c;而且很多使用poi手动写入的也是不行&#xff0c;最多就是让你在打开文件时提示你更新目录/更新域&#xff0c;用户体验很差&#xff0c;要点击好几次而且wps还不…...

OpenCV高级图形用户界面(9)更改指定窗口的位置函数moveWindow()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将窗口移动到指定的位置。 cv::moveWindow() 函数用于更改指定窗口的位置。你可以使用这个函数来移动窗口到屏幕上的任何位置。 函数原型 void …...

华山论剑之Rust的Trait

华山论剑&#xff0c;群雄荟萃&#xff0c;各显神通。武林中人&#xff0c;各有所长&#xff0c;或剑法飘逸&#xff0c;或掌法刚猛&#xff0c;或轻功绝顶。这就好比Rust中的trait&#xff0c;它定义了一种武功套路&#xff0c;而不同的门派、不同的人&#xff0c;可以将这套武…...

AI 编译器学习笔记之七五 -- pdb 使用方法

1、进入调试状态有2种方法&#xff1a;Python工具PDB调试器的使用方法详解_python_脚本之家 (jb51.net) a) 在重新种设置断点正常执行&#xff1a;遇到代码中插入的pdb.set_trace()或者breakpoint()进入调试状态 b) 不修改命令行&#xff1a;直接使用 python3 -m pdb pdb_demo.…...

15分钟学Go 第8天:控制结构 - 循环

第8天&#xff1a;控制结构 - 循环 在Go语言中&#xff0c;循环是一种基本的控制结构&#xff0c;用于重复执行一段代码。今天我们将深入了解Go语言中的for循环&#xff0c;包括它的各种用法、语法结构、以及如何在实践中有效地应用循环。 1. for 循环的基本概念 for循环是G…...

后端接收参数的几种常用注解

目录 一、RequestParam 二、RequestBody 三、PathVariable 四、RequestHeader 五、RequestAttribute 六、RequestPart 七、Valid 一、RequestParam 1.作用 用于将请求中的 查询参数 或 表单参数 绑定到方法的参数上。支持 GET 和 POST 请求。 2.使用方法 GetMappin…...

如何使用docker在linux中配置C++环境

目录 1. 安装docker 2. 配置C环境 1&#xff09;启动ubuntu:22.04容器 2&#xff09;配置编译环境G 3&#xff09;安装软件 4&#xff09;测试 1. 如何打包容器生成tar&#xff1f; a. 生成容器镜像 b. 将镜像压缩成tar 2. 如何将容器内部的端口映射至宿主机&#xf…...

darknet_ros 使用教程

首先是git clone可能会因为到没有权限的问题&#xff08;SSH&#xff09;&#xff0c;此时输入 git clone --recursive https://github.com/leggedrobotics/darknet_ros.git 下载成功之后 catkin_make -DCMAKE_BUILD_TYPERelease catkin失败原因&#xff08;在CMakefile中&…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...