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

Odinpeng

已于 2024-08-12 18:31:56 修改

阅读量1.3k

点赞数 7

文章标签： javascript html vue.js webrtc

于 2024-08-12 18:29:22 首次发布

本文链接：https://blog.csdn.net/Odinpeng/article/details/141138592

版权

一、前言

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

实现步骤：

通过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', // 指定视频类型，特别注意此处伟flv
			isLive: 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', // 指定视频类型，特别注意此处伟flv
			isLive: 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>