html支持网络串流flv视频播放

小徐敲java

已于 2022-10-31 18:19:55 修改

阅读量1.1k

点赞数 4

文章标签： html 音视频前端

于 2022-10-30 17:17:49 首次发布

本文链接：https://blog.csdn.net/qq_19891197/article/details/127601971

版权

1：直接上代码，把url替换成flv访问路径就可以

我这项目是时时拉取nms（Node-Media-Server）的视频

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/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>
  <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: 'http://192.168.88.88:1934/live/wurenji.flv'
        },
		{
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true //自动清除缓存
          }
		);
		
		
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
        // flvPlayer.stop();
    }
	

	
</script>