diff --git a/src/platforms/app-plus/view/components/video/index.vue b/src/platforms/app-plus/view/components/video/index.vue
index 2895aa0943d672bf8d64a0a88c06c5a52674f524..cc39bb531e77fab34e3e72b45eb31906ab93ba8f 100644
--- a/src/platforms/app-plus/view/components/video/index.vue
+++ b/src/platforms/app-plus/view/components/video/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <uni-video
-    v-bind="attrs"
+  <uni-video
+    v-bind="attrs"
     v-on="$listeners">
-    <div
-      ref="container"
+    <div
+      ref="container"
       class="uni-video-container" />
     <div class="uni-video-slot">
       <slot />
@@ -12,7 +12,8 @@
 </template>
 <script>
 import {
-  subscriber
+  subscriber,
+  listeners
 } from 'uni-mixins'
 
 const methods = [
@@ -59,16 +60,12 @@ const attrs = [
 
 export default {
   name: 'Video',
-  mixins: [subscriber],
+  mixins: [subscriber, listeners],
   props: {
     id: {
       type: String,
       default: ''
     },
-    hidden: {
-      type: [Boolean, String],
-      default: false
-    },
     src: {
       type: String,
       default: ''
@@ -156,7 +153,8 @@ export default {
         width: '0px',
         height: '0px',
         position: 'static'
-      }
+      },
+      hidden: false
     }
   },
   computed: {
@@ -174,9 +172,12 @@ export default {
   },
   watch: {
     hidden (val) {
-      this.video && this.video[val ? 'show' : 'hide']()
+      this.video && this.video[val ? 'hide' : 'show']()
     }
   },
+  listeners: {
+    '@view-update': '_requestUpdate'
+  },
   mounted () {
     this._updateStyle()
     const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.style))
@@ -185,17 +186,16 @@ export default {
       video.hide()
     }
     this.$watch('attrs', () => {
-      video.setStyles(this.attrs)
-    }, { deep })
+      this.video && this.video.setStyles(this.attrs)
+    }, { deep: true })
     this.$watch('style', () => {
-      video.setStyles(this.style)
-    }, { deep })
+      this.video && this.video.setStyles(this.style)
+    }, { deep: true })
     events.forEach(key => {
       video.addEventListener(key, (data = {}) => {
         this.$trigger(key, {}, data)
       })
     })
-    this.$on('view-update', this._update)
   },
   beforeDestroy () {
     this.video && this.video.close()
@@ -223,21 +223,24 @@ export default {
       }
     },
     _updateStyle () {
-      const rect = this.$refs.container.getBoundingClientRect();
+      const rect = this.$refs.container.getBoundingClientRect()
+      this.hidden = getComputedStyle(this.$el).display === 'none';
       ['top', 'left', 'width', 'height'].forEach(key => {
         let val = rect[key]
         val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val
         this.style[key] = val + 'px'
       })
     },
-    _update () {
+    _requestUpdate () {
       if (this._animationFrame) {
         cancelAnimationFrame(this._animationFrame)
       }
-      this._animationFrame = requestAnimationFrame(() => {
-        delete this._animationFrame
-        this._updateStyle()
-      })
+      if (this.video) {
+        this._animationFrame = requestAnimationFrame(() => {
+          delete this._animationFrame
+          this._updateStyle()
+        })
+      }
     }
   }
 }