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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/882911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java学习教程,从入门到精通,Java 基本数据类型(7)

Java 基本数据类型 在Java中&#xff0c;基本数据类型是编程中最基础的构建块之一。Java提供了八种基本数据类型&#xff0c;分别是&#xff1a;byte、short、int、long、float、double、char 和 boolean。下面是每种数据类型的详细介绍&#xff0c;包括代码示例和注释。 1. …

关于武汉芯景科技有限公司的限流开关芯片XJ6241开发指南(兼容LTC4411)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 1.CTL引脚控制VIN和VOUT的通断 2.CTL引脚控制STAT引脚的状态 3.输出电压高于输入电压加上–VRTO的值&#xff0c;芯片处于关断状态

Artistic Oil Paint 艺术油画着色器插件

只需轻轻一点&#xff0c;即可将您的视频游戏转化为艺术品&#xff01;&#xff08;也许更多…&#xff09;。 ✓ 整个商店中最可配置的选项。 ✓ 六种先进算法。 ✓ 细节增强算法。 ✓ 完整的源代码&#xff08;脚本和着色器&#xff09;。 ✓ 包含在“艺术包”中。 &#x1f…

【数组知识的扩展①】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” ArrayList在Java数组中的使用技巧 这篇博客灵感来源于某一天Aileen(&#x1f92b;)遇到了一道数组合并的题&…

python 文件防感染扫描

一、安装 首先&#xff0c;你需要安装 secplugs-python-client 库。你可以通过 pip 命令来安装&#xff1a; pip install secplugs-python-client确保你的 Python 环境已经正确设置&#xff0c;并且网络连接畅通&#xff0c;以便能够顺利安装。 二、基本用法 1. 初始化客户…

First - Word Fall - Through ( FWFT ) Read Operation

When looking at Xilinx 8 Kintex-7 4 FPGAs memory resources 32, you’ll find that its FIFO generators support two modes of read options - standard read operating and FWFT read operation. What is FWFT? FWFT is a acronym for First-Word Fall-Through. It is g…

【记录】Windows|Windows 修改字体大全(Windows 桌面、VSCode、浏览器)

【记录】Windows&#xff5c;Windows 修改字体大全&#xff08;Windows 桌面、VSCode、浏览器&#xff09; 前言 最近从学长那里发现了一款非常美观的衡水体字体——Maple Mono SC NF。您可以通过以下链接下载该字体&#xff1a;https://github.com/subframe7536/maple-font/…

TiDB替换Starrocks:业务综合宽表迁移的性能评估与降本增效决策

作者&#xff1a; 我是人间不清醒 原文来源&#xff1a; https://tidb.net/blog/6638f594 1、 场景 业务综合宽表是报表生成、大屏幕展示和数据计算处理的核心数据结构。目前&#xff0c;这些宽表存储在Starrocks系统中&#xff0c;但该系统存在显著的性能瓶颈。例如&#…

Vue组件开发的属性

组件开发的属性&#xff1a; 1.ref属性&#xff1a; 如果在vue里&#xff0c;想要获取DOM对象&#xff0c;并且不想使用JS的原生语法&#xff0c;那么就可以使用ref属性 ref属性的用法&#xff1a; 1&#xff09;在HTML元素的开始标记中&#xff0c;或者在Vue子组件中的开始…

JVM、字节码文件介绍

目录 初识JVM 什么是JVM JVM的三大核心功能 JVM的组成 字节码文件的组成 基础信息 Magic魔数 主副版本号 其它基础信息 常量池 字段 方法 属性 字节码常用工具 javap jclasslib插件 阿里Arthas 初识JVM 什么是JVM JVM的三大核心功能 1. 解释和运行虚拟机指…

我的世界之合成

合成&#xff08;Crafting&#xff09;是一种在Minecraft中获得多种方块、工具和其他资源的方法。合成时&#xff0c;玩家必须先把物品从物品栏移入合成方格中。22的简易合成方格可以直接在物品栏中找到&#xff0c;而33的合成方格需要使用工作台或合成器来打开。 目录 1合成系…

当数据遇到威胁:强化治理以抵御网络攻击

当数据遇到威胁&#xff1a;强化治理以抵御网络攻击 在当今这个信息化高速发展的时代&#xff0c;数据已成为企业乃至国家的核心资产。无论是金融交易、医疗健康、个人隐私&#xff0c;还是国家安全信息&#xff0c;都依赖于数字系统的存储与传输。然而&#xff0c;随着数据价…

LabVIEW智能螺杆空压机测试系统

基于LabVIEW软件开发的螺杆空压机测试系统利用虚拟仪器技术进行空压机的性能测试和监控。系统能够实现对螺杆空压机关键性能参数如压力、温度、流量、转速及功率的实时采集与分析&#xff0c;有效提高测试效率与准确性&#xff0c;同时减少人工操作&#xff0c;提升安全性。 项…

Ubuntu22.04 制作系统ISO镜像

第一步&#xff1a;安装软件-Systemback 1.如果已经添加过ppa&#xff0c;可以删除重新添加或者跳过此步 sudo add-apt-repository --remove ppa:nemh/systemback 2.添加ppa 我是ubuntu20&#xff0c;但这个软件最后支持的是 ubuntu16.04版本&#xff0c;所以加一个16版本…

C++ | Leetcode C++题解之第480题滑动窗口中位数

题目&#xff1a; 题解&#xff1a; class DualHeap { private:// 大根堆&#xff0c;维护较小的一半元素priority_queue<int> small;// 小根堆&#xff0c;维护较大的一半元素priority_queue<int, vector<int>, greater<int>> large;// 哈希表&#…

LeetCode53:最大子数组和

题目链接&#xff1a;53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 代码如下 class Solution { public:int maxSubArray(vector<int>& nums) {//dp含义&#xff1a;dp[i]是以nums[i]结尾的最大连续子数组//if(nums[i] > nums[i - 1])//dp[i] dp[i…

MySQL 中如何优化 DISTINCT 查询:基于 Java 的实践与应用

全文目录&#xff1a; 开篇语前言摘要简介概述1. 使用索引优化2. 限制选择字段3. 使用 GROUP BY 替代 DISTINCT 核心源码解读Java代码示例&#xff1a;优化DISTINCT查询代码说明 案例分析案例一&#xff1a;数据去重优化 应用场景演示场景一&#xff1a;日志数据去重场景二&…

Tftpd.exe源代码分析----TftpdIoPostReceiveBuffer函数分析

第一部分&#xff1a; TftpdIoAssignSocket函数调用了TftpdIoInitializeSocketContext函数 TftpdIoInitializeSocketContext函数注册了回调函数TftpdIoReadNotification void TftpdIoInitializeSocketContext(PTFTPD_SOCKET socket, PSOCKADDR_IN addr, PTFTPD_CONTEXT conte…

学SQL第一天

一&#xff0c;SQL指结构化查询语言&#xff0c;全称是Structured Query Language。 SQL可以访问和处理数据库&#xff0c;包括数据查询&#xff0c;插入&#xff0c;更新和删除。 SQL可以创建新数据库&#xff0c;新的表和创建存储过程。 sql语句分为四类 DDL数据定义语言 …

自动化测试实施过程中需要考虑的因素!

自动化测试是软件开发过程中不可或缺的一部分&#xff0c;它能够提高测试效率、减少人力成本&#xff0c;并确保软件质量的一致性。然而&#xff0c;自动化测试的实施并非没有挑战。为了确保自动化测试的有效性和可持续性&#xff0c;开发者需要综合考虑多种因素&#xff0c;包…