720页面增加声音按钮

src/pages/webgl_rxdz_720/webgl_rxdz_720.html

@@ -15,7 +15,11 @@
 		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
 		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
 	</div> -->
-	<div id="mapDiv" ref="webgl"></div>
+	<div id="mapDiv" ref="webgl">
+		<div v-if="videoUrl" class="voice-btn rows justify-center" @click="updateMuted">
+			<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+		</div>
+	</div>
 	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
 		 width="100vw" height="100vh">
 	</canvas>
@@ -27,5 +31,7 @@
 	  :spaceObj="curSpaceObj" ></viewMask> -->
 	<!-- 生成截屏的画布对象 -->
 	<canvas id="canvas" type="2d" :style="{'height':'100vh','top':'100vh'}"></canvas>
+	<video id="myvideo" style="display: none;" loop :muted="muted"
+	autoplay controls="false" ></video>
 	<!-- <video id="myvideo" loop muted autoplay width="304" height="540" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src="https://dm.static.elab-plus.com/miniProgram/001.mp4"></video> -->
 </div>

src/pages/webgl_rxdz_720/webgl_rxdz_720.scss

@@ -3,6 +3,15 @@
 	height:100vh;
 	overflow: hidden;
 }
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	right: 20px;
+	bottom: 20px;
+	border-radius: 50%;
+}
 canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;}
 #mapDiv{
 	background-color: #fff;

src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -110,6 +110,7 @@
 			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.videoUrl = this.$route.query.videoUrl || '';
+			// this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
 			this.bgUrl = this.$route.query.bgUrl ||
 				'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
 			this.coordinate = this.$route.query.coordinate || '';
@@ -217,7 +218,27 @@
 				}
 				starRender(); //启动渲染
 				if (that.isIOS) {
-					document.addEventListener("WeixinJSBridgeReady", function() {
+					// document.addEventListener("WeixinJSBridgeReady", function() {
+					// 	if (that.type) {
+					// 		moreTest()
+					// 	} else {
+					// 		videoHandle({
+					// 			videoUrl: that.videoUrl,
+					// 			coordinate: that.coordinate,
+					// 			muted: that.muted
+					// 		});
+					// 	}
+					// }, false)
+					wx.config({
+						debug: false,
+						appId: '',
+						timestamp: '',
+						nonceStr: '',
+						signature: '',
+						jsApiList: []
+					})
+					wx.ready(function() {
+						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
 						if (that.type) {
 							moreTest()
 						} else {
@@ -227,14 +248,13 @@
 								muted: that.muted
 							});
 						}
-					}, false)
+					})
 				}
 				var guideMask = document.querySelector('#guide-mask');
 				document.addEventListener("touchend", function() {
 					guideMask.classList.add('guide-mask-hide');
 					if (!that.isIOS && that.hasOneTouch == false) {
 						that.hasOneTouch = true;
-						// setTimeout(()=>{
 						if (that.type) {
 							moreTest()
 						} else {
@@ -244,7 +264,6 @@
 								muted: that.muted
 							});
 						}
-						// },2000)
 					}
 				}, false);
 			}
@@ -375,11 +394,17 @@
 					return false;
 				}
 				// 创建视频元素
-				var video = document.createElement('video');
+				// var video = document.createElement('video');
+				var video;
+				if(that.type){
+					video = document.createElement('video');
+				}else{
+					video = document.getElementById('myvideo');
+				}
 				video.src = item.videoUrl; // 视频文件的路径
 				video.setAttribute("crossOrigin", "Anonymous");
 				video.loop = true;
-				video.muted = item.muted;
+				video.muted = that.type?item.muted:that.muted;
 				video.controls = false;
 				video.autoplay = true;
 				video.preload = 'auto';
@@ -636,6 +661,9 @@
 			clearHandle() {
 				this.clearEvent();
 			},
+			updateMuted(){
+				this.muted = !this.muted;
+			},
 		}
 	}
 </script>

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -224,13 +224,6 @@
 				});
 				// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 				starRender(); //启动渲染
-				// if(that.isIOS){
-				// 	document.addEventListener("WeixinJSBridgeReady", function (){
-				// 	    videoHandle();
-				// 	}, false)
-				// }else{
-				// 	videoHandle();
-				// }
 				renderer.domElement.addEventListener('touchstart', function (event) {
 					fingerCount = event.touches.length;//手指个数
 					if(fingerCount == 2){