做的一个项目里面有一个需求需要监控视频，但是项目的一些组件兼容问题，此次项目无法使用海康的视频插件。所以就使用了更简单的easyplayer.js组件。
首先安装easyplayer:
npm install @easydarwin/easyplayer --save在VUE中调用
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录。
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录。
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录。
在 html 中引用 dist/component/EasyPlayer-lib.min.js
###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录。
上效果图：
（因为某些原因就不展示过多的监控画面了，所以用图片挡住了。）
代码部分：
这次项目我使用了官方的HTML DEMO所以就在vue里面iframe一下html页面。
首先在vue里面iframe
<template>
<iframe :src='src' frameborder="0" style="width: 100%;height: 100%;"></iframe>
</template>
<script>
export default {
data() {
return {
showSessionId: "",
src: "",
};
},
mounted() {
this.showSessionId = window.location.search;
this.src = `../../../static/videom/index.html${this.showSessionId}`;
},
methods: {
},
};
</script>请求海康视频接口会返回一个视频流地址并且会重新请求地址会变化，所以需要写方法。
然后就是重点的html了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./EasyPlayer-element.min.js"></script>
</head>
<style>
#player {
width: 50%;
height: 50%;
}
#player .easy-player {
height: 400px;
width: 850px;
flex: 1;
}
</style>
<body style="width:100%;height: 100%;">
<div id="videobox3" style="width:100%;height: 100%;display: flex;flex-wrap: wrap;">
</div>
<script type="text/javascript">
var drvicelist3 = [
'213456789012389123aaa',//海康视频key
'123333333333333asdasd',//海康视频key
]
var urllist3 = []
var namelist3 = [
'监控一区',
'监控二区',
]
function getUrl3(drviceCode) {
$.ajax({
type: "get",
url: '/dr/video/getVideoUrl?drviceCode=' + drviceCode,
success: function (data) {
urllist3.push(data.body)
},
error: function (err) {
console.log('请求视频流失败：', err);
},
});
}
drvicelist3.forEach(item => {
getUrl3(item)
})
setTimeout(() => {
let html = ''
urllist3.forEach((item, index) => {
html += '<easy-player video-url="' + item + '" id="player" live="true" video-title=" ' + namelist3[index] + ' " show-custom-button="true" decode-wasm="true"></easy-player>'
})
$('#videobox3').html(html)
}, 1000);
</script>
</body>
</html>视频属性参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| video-url | 视频地址 | String | - |
| video-title | 视频右上角显示的标题 | String | - |
| poster | 视频封面图片 | String | - |
| auto-play | 自动播放 | Boolean | true |
| live | 是否直播, 标识要不要显示进度条 | Boolean | true |
| speed | 是否显示倍速播放按钮。注意：当live为true时，此属性不生效 | Boolean | true |
| loop | 是否轮播。 | Boolean | false |
| alt | 视频流地址没有指定情况下, 视频所在区域显示的文字 | String | 无信号 |
| muted | 是否静音 | Boolean | false |
| aspect | 视频显示区域的宽高比 | String | 16:9 |
| isaspect | 视频显示区域是否强制宽高比 | Boolean | true |
| loading | 指示加载状态, 支持 sync 修饰符 | String | - |
| fluent | 流畅模式 | Boolean | true |
| timeout | 加载超时(秒) | Number | 20 |
| stretch | 是否不同分辨率强制铺满窗口 | Boolean | false |
| show-custom-button | 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准) | Boolean | true |
| isresolution | 是否在播放 m3u8 时显示多清晰度选择 | Boolean | false |
| isresolution | 供选择的清晰度 "yh,fhd,hd,sd", yh:原始分辨率 | fhd:超清，hd:高清，sd:标清 | - |
| resolutiondefault | 默认播放的清晰度 | String | hd |
| isTransCoding | 是否开启转raw | Boolean | false |