使⽤vue⼆次开发海康监控H5视频播放
使⽤vue⼆次开发海康监控H5视频播放
由于公司项⽬需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使⽤videojs使⽤rtmp流进⾏监控的直播，因为现在主流浏览器都不⽀持flash插件，⽽videojs使⽤rtmp流直播的话需要浏览器⽀持flash，所以果断放弃，后来决定使⽤hls协议调⽤H5播放器进⾏播放。然后当时找了两个H5播放器⼀个是，另⼀个是，有⼀说⼀阿⾥云的还是很强⼤的，犹豫hls流延迟⽐较久，最后公司决定使⽤海康的进⾏开发
下边是西⽠的demo跟阿⾥云的demo有兴趣的可以去看看官⽅⽂档
西⽠播放器⽰例demo
这⾥没写太对只是⼤致看了看试了⼀下有兴趣的可以⾃⼰去了解了解
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,ur-scalable=no,minimal-ui" />幻觉 英文
<meta name="referrer"content="no-referrer"/>
<title>播放器</title>
<script
src="/npm/xgplayer@2.9.6/browr/index.js"
chart="utf-8"
></script>
<script
src="/npm/xgplayer-hls/dist/index.min.js"
chart="utf-8"
></script>
<style type="text/css">
html,
body{
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
body{
display: flex;
}
#m{
flex: auto;
}
理臣教育</style>
<script type="text/javascript">
window.addEventListener("resize",function(){
});
</script>
</head>
<body>
<div id="m"></div>
<script type="text/javascript">
let player =new HlsPlayer({
id:"m",
url:"58.60.109.114:83/openUrl/7U2qlBC/live.m3u8",
isLive:true,
autoplay:true,
playsinline:true,
height:"400px",
width:"400px",algiers
ignores:["time","progress"],
});
</script>headphone jack
惊喜英文怎么写</body>
</html>
阿⾥云的⽰例demo
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, ur-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet"href="/de/prismplayer/2.9.3/skins/default/aliplayer-min.css"/>
<script type="text/javascript"chart="utf-8"src="/de/prismplayer/2.9.3/aliplayer-m
in.js"></script>
</head>
<body>
<div class="prism-player"id="player-con"></div>
ruixin
<script>
姐弟恋 英语var player =new Aliplayer({
"id":"player-con",
"source":"///video/aliyunmedia.mp4",
"width":"100%",
"height":"500px",
"autoplay":true,
英语动画片"isLive":fal,
"rePlay":fal,
温情橄榄球
"playsinline":true,
"preload":true,
"controlBarVisibility":"hover",
"uH5Prism":true
},function(player){
console.log("The player is created");
}
);
</script>
英语对话短文</body>
使⽤海康的H5视频开发包，
按照海康提供的demo使⽤这个进⾏开发必须要使⽤ws协议进⾏流的传输，于是决定在后端进⾏流的获取，前端发送地点名称获得直播的流的地址，然后在调⽤播放的⽅法进⾏播放，在做的时候遇到了⼀点⼩问题，困扰了很久。
因为我是在vue中使⽤的，⾸先要判断当前的电脑系统是64位还是32位，根据不同的系统加载不同的⽂件，并且在index.html中引⼊必须的视频包
<script src="<%= BASE_URL %>js/playctrl64/h5player.min.js"></script>
<script>
const script = ateElement('script');
const agent = LowerCa();
if(agent.indexOf('win32')>=0|| agent.indexOf('wow32')>=0){
script.src ='<%= BASE_URL %>js/playctrl32/Decoder.js';
}el if(agent.indexOf('win64')>=0|| agent.indexOf('wow64')>=0){
script.src ='<%= BASE_URL %>js/playctrl64/Decoder.js';
}
};
</script>
接下来在页⾯中的使⽤参考下载的⽂档H5playerV1.0.0开发指南.
海康的api
