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

原生html+js播放flv直播视频流【vue等皆可用】

news 2025/9/16 16:42:49

一、前言

最近着手了一个新需求：将某记录仪的实时视频在页面展现。

实现步骤：

  1. 通过WebRtc将直播视频转码为flv/rtsp格式流；
  2. 通过Vlc或代码中的视频播放器播放视频。

常见播放flv直播视频流软件如：VLC、PotPlayer等，好用但无法嵌入代码。

在此介绍一种使用原生html+js即可实现直播视频流播放的方式，内网外网皆可用。

二、实现

  • 引入Bilibili开源Flash 视频（FLV）播放器

方式一：外网引入
https://github.com/Bilibili/flv.js
方式二：内网导入（把js下载下来标签引入即可）
链接：https://pan.baidu.com/s/1kiDJgoxGn4pQ3qCROdu0fw?pwd=myjn
提取码：myjn

  • 编写调用播放器方法
if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv', // 指定视频类型，特别注意此处伟flvisLive: true, // 开启直播hasAudio: false, //需要设置为false不然播放不了视频cors: true,  // 开启跨域访问url: 'url' //FLV视频地址},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play(); //开始播放// flvPlayer.stop(); //停止播放时打开}

三、整体Demo

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="./flv.min.js"></script>
<style>
body,center{
padding:0;
margin:0;
}.v-container{width:640px;height:360px;border:solid 1px red;}video{width:100%;height:100%;}
</style>
</head>
<body><h2>FLV视频播放测试</h2><div class="v-container"><video id="videoElement" muted autoplay="autoplay" preload="auto" controls="controls"></video></div>
</body>
</html>
<script>if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv', // 指定视频类型，特别注意此处伟flvisLive: true, // 开启直播hasAudio: false, //需要设置为false不然播放不了视频cors: true,  // 开启跨域访问url: 'url' //FLV视频地址},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play(); //开始播放// flvPlayer.stop(); //停止播放时打开}
</script>

相关文章：

原生html+js播放flv直播视频流【vue等皆可用】

一、前言 最近着手了一个新需求&#xff1a;将某记录仪的实时视频在页面展现。 实现步骤&#xff1a; 通过WebRtc将直播视频转码为flv/rtsp格式流&#xff1b;通过Vlc或代码中的视频播放器播放视频。 常见播放flv直播视频流软件如&#xff1a;VLC、PotPlayer等&#xff0c;…...

编程日记 2024/8/13 7:50:06

初学java第一天：写一下熟悉的猜数字小游戏

初学java&#xff0c;不知道bug多不多&#xff0c;为了整理凌乱的思绪&#xff0c;写一个实践一下&#xff0c;跟C好像啊 简单来说&#xff0c;初学java确实有一点难度&#xff0c;但是大部分知识和思想和C语言和python相似&#xff0c;所以写起来还行&#xff0c;注意是对一些…...

编程日记 2024/8/13 7:47:03

【C++】如何判断类型

typeid的缺点 typeid对多态的情况不支持 #include <iostream>class Parent { public:Parent() {} private:int a 0; };class Child :public Parent { public :Child() {} private:int b 0; };int main() {Parent* obj1 new Child();Parent* pobj1 obj1;std::cout &…...

编程日记 2024/8/13 7:44:00

让一切发生皆有利于我，在人生的长河中，我们常常面临诸多的不确定性和变化

让一切发生皆有利于我，在人生的长河中，我们常常面临诸多的不确定性和变化。如何在这纷繁复杂的世界中保持内心的坚定，以积极的姿态应对生活的起伏，是我们一生都需要探索的课题。“一切发生皆有利于我”，这是一种心态；“让一切发生皆有利于我”，这是一种策略。这一深刻的…...

编程日记 2024/8/13 7:42:58

腾讯云AI代码助手：智能AI代码助手 ，新一代的高效代码开发辅助工具

前言 近些年是一个科技大爆发的时代&#xff0c;自从大模型发布以来越来越多的科技产品出现。例如去年的智能编码助手自出现以来&#xff0c;各大老牌大厂腾讯&#xff0c;百度 阿里也都紧随其后&#xff0c;智能编码助手的出现可以说大大的节省了我们写一些冗余代码的时间成本…...

编程日记 2024/8/13 7:37:53

C#:索引器 集合初始化器 事件访问器 枚举器 迭代器

1.索引器 就是有参属性 ,这个属性的get访问器接受 一个或多个参数 ,set访问器接受 两个或多个参数 <<via c#>>第10.2节 索引器可以被是被智能的数组 ,属性封装了类中的一个值,而索引器 封装了一组值,使用索引器时,语法和使用数组一样 <<c#从入门到精…...

编程日记 2024/8/13 7:36:52

css伪类选择器、盒子模型等

一、伪类选择器 1.1查找单个元素 根据元素的结构关系查找元素 查找第一个元素&#xff1a;标签名:first-child 查找最后一个元素&#xff1a;标签名&#xff1a;last-child 查找第n个元素&#xff1a;标签名&#xff1a;nth-child(n) 1.2查找多个元素 :nth-child(公式&#xf…...

编程日记 2024/8/13 7:35:51

opencv-python图像增强三：图像清晰度增强

文章目录 一、简介&#xff1a;二、图像清晰度增强方案&#xff1a;三、算法实现步骤3.1高反差保留实现3.2. usm锐化3.3 Overlay叠加 四&#xff1a;整体代码实现五&#xff1a;效果 一、简介&#xff1a; 你是否有过这样的烦恼&#xff0c;拍出来的照片总是不够清晰&#xff…...

编程日记 2024/8/13 7:34:49

第130天：内网安全-横向移动PTH哈希PTT 票据PTK密匙Kerberos密码喷射

环境搭建 这里这个环境继续上一篇文章搭建的环境 案例一&#xff1a;域横向移动-PTH-Mimikatz&NTLM 什么是pth&#xff1f; PTH Pass The Hash &#xff0c;通过密码散列值 ( 通常是 NTLM Hash) 来进行攻击。在域环境中&#xff0c;用户登录计算机时使用的域账号&…...

编程日记 2024/8/13 7:33:48

SB3045LFCT-ASEMI无人机专用SB3045LFCT

编辑&#xff1a;ll SB3045LFCT-ASEMI无人机专用SB3045LFCT 型号&#xff1a;SB3045LFCT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 批号&#xff1a;最新 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;30A 最大循环峰值反向电压&#xff08;VRRM&…...

编程日记 2024/8/13 7:32:47

RPA财务机器人是什么，RPA的具体应用场景有哪些？| 实在RPA研究

数字化转型关键期&#xff0c;越来越多的人工智能及超自动化技术在企业财务工作中得以普及应用&#xff0c;以提升财务工作效率&#xff0c;促进财务部门实现 RPA财务机器人是什么&#xff1f; RPA&#xff0c;即机器人流程自动化&#xff08;Robotic Process Automation&#…...

编程日记 2024/8/13 7:31:46

滑动窗口 | Java | (hot100) 力扣 3

力扣 3.无重复字符的最长子串 暴力法&#xff1a;双层for循环&#xff0c;i-j的字符查重 滑动窗口&#xff1a;因为这题被分在这个类别里&#xff0c;那么已知要用滑动窗口&#xff0c;思路应该是什么。 反正我想不出来…… 看了别人的题解写出来的出错点&#xff1a;特别容易…...

编程日记 2024/8/13 7:30:45

【产品经理】竞品分析怎么理解？拆解一下

什么叫竞品&#xff1f;&#xff08;研究的对象&#xff09; 竞品看你怎么理解&#xff0c;有时候不一定是你的竞争对手&#xff0c;有可能是其他行业也做了这个功能&#xff0c;那你也可以学习&#xff0c;有类似的功能或者策略都可以学习&#xff0c;不过这个可能在管理学上…...

编程日记 2024/8/13 7:28:44

合规性导航：处理爬虫数据用于机器学习的最佳实践

在数据驱动的时代&#xff0c;机器学习已成为企业和研究者的重要工具。然而&#xff0c;使用爬虫技术抓取的数据进行机器学习时&#xff0c;合规性问题不容忽视。本文将详细探讨在使用爬虫抓取的数据进行机器学习时可能遇到的合规性问题&#xff0c;并提供相应的最佳实践。 一…...

编程日记 2024/8/13 7:26:41

spring中使用到的设计模式有哪些

Spring 框架是一个高度模块化和灵活的框架&#xff0c;广泛使用了各种设计模式来实现其核心功能和架构。这些设计模式帮助 Spring 提供了高可配置性、可扩展性和可维护性。以下是 Spring 框架中使用到的一些关键设计模式&#xff1a;...

编程日记 2024/8/13 7:24:39

splitcontainer控件设置固定大小

要设置SplitContainer控件以固定的大小&#xff0c;可以通过设置SplitContainer的FixedPanel属性来实现。您还需要设置IsSplitterFixed属性为true来锁定分割条的大小&#xff0c;并且通过设置SplitterWidth或SplitterLength属性来调整分割条的宽度或高度。 以下是一个示例代码…...

编程日记 2024/8/13 7:22:37

最近在写的支付模块

最近再写支付模块就到处借鉴 旨在回顾一下。 1.确认订单功能 使用场景是&#xff1a;用户在选择好购物车后&#xff0c;或者是直接选择商品后&#xff08;选择商品封装为购物车&#xff09; 这样做是根据尚硅谷来学习的 目前需要这些属性&#xff0c;原因是在确认订单页面后…...

编程日记 2024/8/13 7:20:34

解决域名加别名后再代理或者映射到fastadmin项目

如果遇到微应用不想再添加或者不方便添加单独的二级域名时&#xff0c;就需要用到代理或者映射来进入到我们的微应用项目中。 可以修改route.php路由文件的下面这个参数 __alias__ > [别名 > 模块/控制器] 如图 然后再修改config.php文件里面的view_replace_str参数…...

编程日记 2024/8/13 7:18:32

Armv9.5架构新增的关键扩展--精简版

Armv9.5架构扩展是对Armv9.4的扩展。它增加了强制性和可选的架构特性。有些特性必须一起实现。实现是符合Armv9.5规范，需要满足以下条件： 符合/兼容Armv9.4规范包含所有Armv9.5架构的强制性特性。符合Armv9.5规范的实现还可以包括： Armv9.5的可选特性以下是arm9.5架构中关键…...

编程日记 2024/8/13 7:17:30

STM32 GPIO 模块

B站视频地址&#xff1a;芯片内部GPIO模块细节 引脚 将 STM32 芯片&#xff0c;类比为【大脑】 而旁边的引脚&#xff0c;类比为【神经】 通过引脚&#xff0c;使得&#xff0c;STM32&#xff0c;可以和外部世界&#xff0c;进行交流 比如&#xff0c;当我们和别人说话时&am…...

编程日记 2024/8/13 7:14:28

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/9/10 1:23:08

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/9/11 12:54:58

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/9/11 12:54:50

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/9/1 7:30:10

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/9/14 7:52:42

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/9/12 22:46:16

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/7/21 4:21:36

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/9/7 8:47:06