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

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

news 2025/7/23 0:47:07

一、前言

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

实现步骤：

通过WebRtc将直播视频转码为flv/rtsp格式流；
通过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>