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

一、前言

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

实现步骤:

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

你可能感兴趣的:(javascript,html,vue.js,webrtc)