diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index a0239e1..cd27998 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -6,7 +6,16 @@
       </el-col>
 
       <el-col :span="18">
-        <web-play ref="webCtrl" />
+        <div style="margin-top: 14px">
+          <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+            <el-tab-pane label="海康" name="hk">
+              <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_preview.html"/>
+            </el-tab-pane>
+            <el-tab-pane label="NVR" name="nvr">
+              <iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -31,6 +40,16 @@
 
   },
   methods: {
+    handleClick(tab, event) {
+      if (tab.name === 'hk') {
+        this.activeName = 'hk'
+        window.frames['playHK'].initPlugin()
+      } else if (tab.name === 'nvr') {
+        window.frames['playHK'].close()
+        this.activeName = 'nvr'
+        window.frames['playNVR'].stopPlayReal(null)
+      }
+    },
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.ip === 'undefined' || camera.ip === '') {