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

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

news 2026/2/10 11:01:36

一、前言

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

实现步骤：

  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

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/8 20:42:46

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2026/1/31 9:49:23

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2026/2/8 0:32:03

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

编程新知 2025/12/10 8:37:24

WinUI3开发_使用mica效果

简介 Mica(云母)是Windows10/11上的一种现代化效果&#xff0c;是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果&#xff0c;Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...

编程新知 2026/2/9 22:13:16

使用python进行图像处理—图像变换（6）

图像变换是指改变图像的几何形状或空间位置的操作。常见的几何变换包括平移、旋转、缩放、剪切&#xff08;shear&#xff09;以及更复杂的仿射变换和透视变换。这些变换在图像配准、图像校正、创建特效等场景中非常有用。 6.1仿射变换(Affine Transformation) 仿射变换是一种…...

编程新知 2026/2/9 15:44:31