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

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

news 2026/4/5 16:20:57

一、前言

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

实现步骤：

  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

3步解锁7-Zip：告别存储焦虑的终极文件管理方案

3步解锁7-Zip&#xff1a;告别存储焦虑的终极文件管理方案 【免费下载链接】7z 7-Zip Official Chinese Simplified Repository (Homepage and 7z Extra package) 项目地址: https://gitcode.com/gh_mirrors/7z1/7z 你是否曾因电脑空间不足而焦虑&#xff1f;是否在传输…...

编程新知 2026/4/5 15:11:42

BiliDownloader：B站视频高效下载与管理全攻略

BiliDownloader&#xff1a;B站视频高效下载与管理全攻略 【免费下载链接】BiliDownloader BiliDownloader是一款界面精简&#xff0c;操作简单且高速下载的b站下载器 项目地址: https://gitcode.com/gh_mirrors/bi/BiliDownloader 一、核心价值&#xff1a;重新定义B站…...

编程新知 2026/4/5 11:23:48

ARM版银河麒麟V10 SP1上，用Box64+Wine跑Windows软件，我踩过的那些坑都帮你填好了

ARM版银河麒麟V10 SP1上Box64Wine实战避坑指南 第一次在ARM架构的银河麒麟系统上双击运行Windows软件的exe文件时&#xff0c;那种违和感至今难忘——就像在微波炉里成功烤出了蛋糕。但这背后的曲折&#xff0c;恐怕只有真正尝试过的开发者才能体会。本文将分享我在飞腾D2000平…...

编程新知 2026/4/5 11:09:41

FigmaCN终极指南：3分钟实现Figma全界面汉化，设计师效率提升50%

FigmaCN终极指南&#xff1a;3分钟实现Figma全界面汉化&#xff0c;设计师效率提升50% 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 你是否曾在使用Figma时因为英文界面而感到困扰&am…...

编程新知 2026/4/5 10:55:26

加密压缩包密码恢复全攻略：使用ArchivePasswordTestTool找回丢失的密码

加密压缩包密码恢复全攻略&#xff1a;使用ArchivePasswordTestTool找回丢失的密码 【免费下载链接】ArchivePasswordTestTool 利用7zip测试压缩包的功能 对加密压缩包进行自动化测试密码 项目地址: https://gitcode.com/gh_mirrors/ar/ArchivePasswordTestTool 在日常工…...

编程新知 2026/4/5 10:25:18

RK312X Android 7.1内核ACM驱动踩坑：手动管理instances变量避免系统崩溃

RK312X Android 7.1内核ACM驱动状态管理深度剖析&#xff1a;从空指针崩溃到安全计数器设计 在嵌入式Linux内核开发领域&#xff0c;USB Gadget驱动的状态同步问题一直是困扰开发者的典型难题。当我们在RK312X平台上移植Android 7.1系统时&#xff0c;发现了一个极具代表性的案…...

编程新知 2026/4/5 9:10:14

游戏串流技术革新：Sunshine自托管解决方案的深度解析与实践指南

游戏串流技术革新&#xff1a;Sunshine自托管解决方案的深度解析与实践指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 副标题&#xff1a;如何突破硬件限制实现跨设备游戏体验…...

编程新知 2026/4/5 7:57:51

COMSOL设计电极加热通道机关模型：探究内部热流场及电场分布

comsol设计电极加热通道机关模型&#xff0c;可以得加热通道内部热流场及电场分布&#xff0c;害&#xff0c;最近蹲在工位上啃Comsol的时候&#xff0c;突然被导师塞了个小活——要算个电极加热的金属通道里的热流和电场分布&#xff0c;本来想直接拿网上的模板改改交差&#…...

编程新知 2026/4/5 7:28:52

OpenClaw技能扩展实战：用百川2-13B-4bits自动生成技术博客草稿

OpenClaw技能扩展实战&#xff1a;用百川2-13B-4bits自动生成技术博客草稿 1. 为什么需要自动化技术写作 作为技术团队的文档负责人&#xff0c;我每周需要产出3-5篇技术博客。传统写作流程要经历选题会、资料收集、大纲确认、初稿撰写、格式调整等环节&#xff0c;平均每篇文…...

编程新知 2026/4/5 6:30:08

计算机组成原理启发：优化CasRel模型在GPU上的计算与存储访问

计算机组成原理启发&#xff1a;优化CasRel模型在GPU上的计算与存储访问 最近在部署一个关系抽取模型——CasRel时&#xff0c;遇到了点小麻烦。模型本身效果不错&#xff0c;但推理速度总感觉差那么点意思&#xff0c;尤其是在GPU上跑的时候&#xff0c;总感觉硬件没被“喂饱…...

编程新知 2026/4/5 5:39:15