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

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

news 2025/11/6 3:50:20

一、前言

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

实现步骤：

  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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/11/6 1:08:25

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/11/2 21:23:47

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/11/2 22:52:17

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/2 12:41:43

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/26 2:48:36

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/10/27 7:19:52

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/10/28 4:59:27