使用vue二次开发海康监控H5视频播放
由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个是阿里云Web端播放器，有一说一阿里云的还是很强大的，犹豫hls流延迟比较久，最后公司决定使用海康的H5视频包进行开发
下边是西瓜的demo跟阿里云的demo有兴趣的可以去看看官方文档
西瓜播放器示例demo
这里没写太对只是大致看了看试了一下有兴趣的可以自己去了解了解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"
/>
<meta name="referrer" content="no-referrer" />
<title>播放器</title>
<script
src="https://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"
charset="utf-8"
></script>
<script
src="https://cdn.jsdelivr.net/npm/xgplayer-hls/dist/index.min.js"
charset="utf-8"
></script>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
body {
display: flex;
}
#mse {
flex: auto;
}
</style>
<script type="text/javascript">
window.addEventListener("resize", function () {
document.getElementById("mse").style.height = window.innerHeight + "px";
});
</script>
</head>
<body>
<div id="mse"></div>
<script type="text/javascript">
let player = new HlsPlayer({
id: "mse",
url: "http://58.60.109.114:83/openUrl/7U2qlBC/live.m3u8",
isLive: true,
autoplay: true,
playsinline: true,
height: "400px",
width: "400px",
ignores: ["time", "progress"],
});
</script>
最低0.47元/天 解锁文章
7134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
