Html开发：接收wss协议的flv格式视频流链接并显示在页面

一、代码

<html>
　　<head>
　　　　<title>wss协议视频流展示</title>
　　</head>
　　<!-- 网页视频播放器 -->
　　<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
　　<!-- 网页视频播放器flv格式加载相关js（ios系统暂不支持该插件） -->
　　<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
<body>
　　<!-- 视频放置区域 -->
　　<div id="wssFlvVideo"></div>
</body>
　　<script type="text/javascript">
　　　　<!-- flv视频播放器插件加载，配置信息 -->
　　　　new window.FlvJsPlayer({
        　　id: 'wssFlvVideo',
        　　isLive: false,
        　　playsinline: true,
        　　url: 'wss://xxxxxxxxx.flv',
        　　autoplay: true,
        　　height: window.innerHeight,
        　　width: window.innerWidth
    　　});
　　</script>
</html>

　　网页头部加载播放器相关的脚本文件，在页面中进行插件的加载和相关配置：

　　id：视频流要填充展示的页面区域部分id

　　isLive：直播场景要设置为true

　　url：视频流地址

　　autoplay：设置为true的话加载完成后自动开始播放，false需要手动点击

　　height：视频插件高度设置

　　width：视频插件宽度设置

　　

posted @ 2022-08-30 15:46  我命倾尘  阅读(2303)  评论(0)  编辑  收藏  举报