ocxplay.vue 4.37 KB
<template>
	<div style="width: 100%;height: 100%;position: relative;">
		<p style="position: absolute;top: 113px;z-index: 99;text-align: center;width: 100%;" v-if="noIE">请选择IE9以上版本查看视频!</p>
		<object v-show="videoShow" id="nvrTotalOcx" name="nvrTotalOcx"
			classid="CLSID:96DFBBAF-4220-4978-9681-4ABA534A7718"
			codebase="./static/OcxInstall/VionNvrVideoInstall.exe#version=1,0,24"
			style="width: 100%; height:100%;">
			<param name="BorderStyle" value="1" />
			<param name="MousePointer" value="0" />
			<param name="Enabled" value="1" />
			<param name="Min" value="0" />
			<param name="Max" value="10" />
			<embed wmode="opaque"/>
			<param name="wmode" value="transparent"/>
		</object>
		<!--安装弹框-->
		<el-dialog title="提示" :visible.sync="stepDialogVisible" width='252px' :close-on-click-modal='false' @close="stepClose">
			<span>本网站需要安装视频插件才可正常使用,请安装完成后请手动重启浏览器</span>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="stepDialogVisible = false">关闭</el-button>
		  </div>
		</el-dialog>
		<!--更新弹框-->
		<el-dialog title="提示" :visible.sync="updateDialogVisible" width='252px' :close-on-click-modal='false' @close="stepClose">
			<span>该网站当前视频插件版本为{{currentVersion}},可能导致部分功能不完善,请更新到最新版本1.0.33</span>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="updateDialogVisible = false">关闭</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				videoShow:true,
				noIE:false,
				currentVersion:0,
				updateDialogVisible:false,
				stepDialogVisible:false
			}
		},
		mounted(){
			setTimeout(()=>{
				this.initVideo();
			},300)
		},
		methods:{
			stepClose(){
				this.videoShow=true;
			},
			initVideo(){
				var  ieVer=this.IEVersion();
				if(ieVer==7||ieVer==8||ieVer==6||ieVer=='-1'){
					this.noIE=true
				}else{
					this.noIE=false
					try{
						this.currentVersion=document.getElementById('nvrTotalOcx').GetOcxVersion();
						var versionArr=this.currentVersion.split('.');
						var versionNum=0;
						versionArr.forEach((item,index,arr)=>{
							versionNum=versionNum+Number(item);
						})
						if(versionNum<34){
							this.videoShow=false;
			  			this.updateDialogVisible=true;
						window.open('./OcxInstall/NvrVideoInstall_1.0.33.exe')
						}
					}catch(e){
						this.videoShow=false;
						this.stepDialogVisible=true;
					window.open('./OcxInstall/NvrVideoInstall_1.0.33.exe')
					return false
					}
				}
				if(typeof nvrTotalOcx != 'undefined'){
					var testStr = 'Null';
					nvrTotalOcx.Init(0, testStr, 1);
					nvrTotalOcx.SetSingleWindow(true);
					nvrTotalOcx.SetParam("VideoSize", 0);
					var medianame = '视频0';
					 // var hostname = window.location.hostname;
					 var hostname = '192.168.9.120';
					 var port=8554;
					 var url = "rtsp://"+hostname+":"+port+"/ch0";
					nvrTotalOcx.PlayRealVideo(url,1,'video',hostname,0);
					window.onbeforeunload=function(){
						nvrTotalOcx.CloseVideoByChannelnum(1)
					}
					
				}
			},
			IEVersion() {
			      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
			      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
			      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
			      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
			      if(isIE) {
			          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
			          reIE.test(userAgent);
			          var fIEVersion = parseFloat(RegExp["$1"]);
			          if(fIEVersion == 7) {
			              return 7;
			          } else if(fIEVersion == 8) {
			              return 8;
			          } else if(fIEVersion == 9) {
			              return 9;
			          } else if(fIEVersion == 10) {
			              return 10;
			          } else {
			              return 6;//IE版本<=7
			          }   
			      } else if(isEdge) {
			          return 'edge';//edge
			      } else if(isIE11) {
			          return 11; //IE11  
			      }else{
			          return -1;//不是ie浏览器
			      }
			  },
			  hideHanlde(){
				  this.videoShow=false;
			  },
			  showHanlde(){
				  this.videoShow=true;
			  }
		}
	}
</script>

<style>
</style>