Selaa lähdekoodia

webRTC拉流页面适配鼠标点击滑动事件进行云机操作

tangdehang 2 kuukautta sitten
vanhempi
commit
aeb065f724
1 muutettua tiedostoa jossa 14 lisäystä ja 8 poistoa
  1. 14 8
      static/rtcEngine/WXtrialInterface.html

+ 14 - 8
static/rtcEngine/WXtrialInterface.html

@@ -13,7 +13,7 @@
     </script> -->
 </head>
 
-<body @touchmove.prevent>
+<body @touchmove.prevent @mousemove.prevent>
     <div id="app" v-cloak>
         <!-- 计时卡计时 -->
         <div class="pfi flex timing" v-if="timingVisible" v-cloak>
@@ -24,23 +24,29 @@
         <!-- 悬浮框 -->
         <div class="levitated-sphere" :style="levitatedSpherePositionData" v-cloak
             @click="levitatedSphereVisible = true">
-            <img src="../static/img/xuanfu_icon.png" alt="" @touchmove.prevent="touchmoveLevitatedSphere"
-                @touchend="touchendLevitatedSphere">
+            <img src="../static/img/xuanfu_icon.png" alt="" @touchmove.prevent="touchmoveLevitatedSphere" @mousemove.prevent="touchmoveLevitatedSphere"
+                @touchend="touchendLevitatedSphere"
+                @mouseup="touchendLevitatedSphere"
+                @mouseleave="touchendLevitatedSphere">
         </div>
 
-        <div class="layout" :style="{height: height + 'px'}" v-cloak  @touchmove.prevent>
+        <div class="layout" :style="{height: height + 'px'}" v-cloak  @touchmove.prevent @mousemove.prevent>
             <!-- 云机位置 -->
-            <div class="layout-view" v-cloak @touchmove.prevent>
+            <div class="layout-view" v-cloak @touchmove.prevent @mousemove.prevent>
                 <video ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay
                     webkit-playsinline="true" playsinline x-webkit-airplay="allow" x5-video-player-type="h5"
                     x5-video-player-fullscreen="true" x5-video-orientation="portraint" id="playerVideo"
-                    class="videoRotate" :controls="false" @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
+                    class="videoRotate" :controls="false" @touchmove.prevent="(event) => {engine.touchClick(event, 2)}" @mousemove.prevent="(event) => {engine.touchClick(event, 2)}"
                     @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
-                    @touchend.prevent="touchendRtcMediaPlayer" v-show="isShowVideo">
+                    @mousedown.prevent="(event) => {engine.touchClick(event, 0)}"
+                    @mouseup.prevent="touchendRtcMediaPlayer"
+                    @mouseleave.prevent="touchendRtcMediaPlayer"
+                    @touchend.prevent="touchendRtcMediaPlayer"
+                    v-show="isShowVideo">
                     当前浏览器暂不支持、请使用谷歌浏览器或前往双子星客户端使用</video>
             </div>
             <!-- 底部按钮 -->
-            <div class="layout-footer" v-cloak @touchmove.prevent>
+            <div class="layout-footer" v-cloak @touchmove.prevent @mousemove.prevent>
                 <template v-for="item in footerBtn">
                     <img :src="item.img" alt="" @click="footerBtnFun(item.key)">
                 </template>