feat: video组件增加x5内核全屏事件监听

jeanary · Jan 14, 2019 · 550560a · 550560a
1 parent 1c8b12e
commit 550560a
Showing 1 changed file with 36 additions and 24 deletions.
diff --git a/src/platforms/h5/view/components/video/index.vue b/src/platforms/h5/view/components/video/index.vue
@@ -49,9 +49,9 @@
         webkit-playsinline
         playsinline
       />
-      <div
-        v-show="controlsShow"
-        class="uni-video-bar uni-video-bar-full"
+      <div
+        v-show="controlsShow"
+        class="uni-video-bar uni-video-bar-full"
         @click.stop>
         <div class="uni-video-controls">
           <div
@@ -67,12 +67,12 @@
             @click.stop="clickProgress($event)"
           >
             <div class="uni-video-progress">
-              <div
-                :style="{width:buffered*100+'%'}"
+              <div
+                :style="{width:buffered*100+'%'}"
                 class="uni-video-progress-buffered"/>
-              <div
-                ref="ball"
-                :style="{left:progress+'%'}"
+              <div
+                ref="ball"
+                :style="{left:progress+'%'}"
                 class="uni-video-ball">
                 <div class="uni-video-inner"/>
               </div>
@@ -93,22 +93,22 @@
           @click.stop="triggerFullscreen"
         />
       </div>
-      <div
-        v-show="start&&enableDanmuSync"
-        ref="danmu"
-        style="z-index: 0;"
+      <div
+        v-show="start&&enableDanmuSync"
+        ref="danmu"
+        style="z-index: 0;"
         class="uni-video-danmu"/>
-      <div
-        v-if="!start"
-        class="uni-video-cover"
+      <div
+        v-if="!start"
+        class="uni-video-cover"
         @click.stop>
-        <div
-          class="uni-video-cover-play-button"
+        <div
+          class="uni-video-cover-play-button"
           @click.stop="play"/>
         <p class="uni-video-cover-duration">{{ (duration||durationTime)|getTime }}</p>
       </div>
-      <div
-        :class="{'uni-video-toast-volume':gestureType==='volume'}"
+      <div
+        :class="{'uni-video-toast-volume':gestureType==='volume'}"
         class="uni-video-toast">
         <div class="uni-video-toast-title">音量</div>
         <svg
@@ -124,8 +124,8 @@
           />
         </svg>
         <div class="uni-video-toast-value">
-          <div
-            :style="{width:volumeNew*100+'%'}"
+          <div
+            :style="{width:volumeNew*100+'%'}"
             class="uni-video-toast-value-content">
             <div class="uni-video-toast-volume-grids">
               <div
@@ -137,8 +137,8 @@
           </div>
         </div>
       </div>
-      <div
-        :class="{'uni-video-toast-progress':gestureType=='progress'}"
+      <div
+        :class="{'uni-video-toast-progress':gestureType=='progress'}"
         class="uni-video-toast">
         <div class="uni-video-toast-title">{{ currentTimeNew|getTime }} / {{ durationTime|getTime }}</div>
       </div>
@@ -467,11 +467,21 @@ export default {
       }
       otherData.danmuIndex = danmuIndex
 
-      self.$trigger('timeupdate', {}, {
+      self.$trigger('timeupdate', $event, {
         currentTime,
         duration
       })
     })
+    video.addEventListener('x5videoenterfullscreen', function ($event) {
+      self.$trigger('fullscreenchange', $event, {
+        fullScreen: true
+      })
+    })
+    video.addEventListener('x5videoexitfullscreen', function ($event) {
+      self.$trigger('fullscreenchange', $event, {
+        fullScreen: false
+      })
+    })
     var originX
     var originY
     var moveOnce = true
@@ -822,6 +832,7 @@ uni-video[hidden] {
   top: 0;
   left: 0;
   overflow: hidden;
+  object-position: inherit;
 }
 
 .uni-video-container.uni-video-type-fullscreen {
@@ -843,6 +854,7 @@ uni-video[hidden] {
 .uni-video-video {
   width: 100%;
   height: 100%;
+  object-position: inherit;
 }
 
 .uni-video-cover {