注意：
1.在static目錄下創建video.html
2.必須安裝2.2.1-win32版本的vlc插件
3.vlc安裝文件：
鏈接：https://pan.baidu.com/s/1yQJ9SDh0YWw84yhXkLrMjQ
提取碼：zq9k
camera.vue頁面：
<template>
<div>
<a href="javascript:;" @click="yulan(record.videoUrl)">預覽</a>
</div>
</template>
<script>
yulan(url) {
localStorage.setItem('url',url)
window.open('/static/video.html', "_blank")
},
<script>
video.html頁面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#containe {
width: 100%;
height: 100%;
}
#vlc {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="containe">
<object type='application/x-vlc-plugin;' pluginspage="http://www.videolan.org/" id='vlc'
events='false' width="100%">
<param name="mrl" value=''/>
<script>
var surl = localStorage.getItem('url')//"rtsp://admin:[email protected]:554/h264/ch45/main/av_stream";
document.getElementById("vlc").getElementsByTagName("param")[0].value = surl;
</script>
<param name='volume' value='50'/>
<param name='autoplay' value='true'/>
<param name='loop' value='false'/>
<param name='fullscreen' value='false'/>
<param name='controls' value='false'/>
</object>
</div>
</body>
</html>