修复微信里背景视频全屏播放、不自动播放的问题；只在移动端且屏幕方向改变时reload，而不是resize时就reload

src/main.js

@@ -40,14 +40,15 @@ if (uaInfo.device.type === 'mobile') {
   app.config.globalProperties.$isMobile = true
 }
 
-// 处理resize事件
-function onResize() {
+// 处理resize和orientation change事件
+// window.addEventListener('resize', (e) => {
+//   onResize(e)
+// })
+// 安卓端chrome、安卓端微信都是支持的。
+screen.orientation.addEventListener("change", (event) => {
   if (app.config.globalProperties.$isMobile) {
     location.reload()
   }
-}
-window.addEventListener('resize', () => {
-  onResize()
 })
 
 // // 禁用上下文菜单

src/views/HistoryNew.vue

@@ -11,10 +11,13 @@
     @touchcancel="onTouchCancel"
   >
     <video
+      ref="bgVideo"
       src="@/assets/videos/bg-history.mp4"
       class="bg"
       autoplay
       loop
+      webkit-playsinline="true"
+      playsinline="true"
     />
     <div
       class="gear-wrap"
@@ -120,6 +123,14 @@ export default {
 
     const spaceEachPerson = 220
 
+    /**
+     * 针对微信中背景视频无法自动播放的问题
+     */
+    const bgVideo = ref(null)
+    onMounted(() => {
+      bgVideo.value.play()
+    })
+
     // mask相关
     const isShowLoadingMask = ref(true)
     onBeforeMount(() => {
@@ -499,6 +510,7 @@ export default {
 
 
     return {
+      bgVideo,
       computeTimeAxisScaleOpacity,
       currentTimeIdx,
       gearFrameIdx,

src/views/Treasure.vue

@@ -4,10 +4,13 @@
     class="treasure"
   >
     <video
+      ref="bgVideo"
       src="@/assets/videos/bg-history.mp4"
       class="bg"
       autoplay
       loop
+      webkit-playsinline="true"
+      playsinline="true"
     />
     <div
       class="grid"
@@ -71,6 +74,14 @@ const prefix = process.env.VUE_APP_API_ORIGIN
 
 const store = useStore()
 
+/**
+ * 针对微信中背景视频无法自动播放的问题
+ */
+const bgVideo = ref(null)
+onMounted(() => {
+  bgVideo.value.play()
+})
+
 // 滑动功能
 let isMouseDown = false
 let isDragged = false

src/views/TreasureDetail.vue

@@ -10,10 +10,13 @@
     </Teleport>
 
     <video
+      ref="bgVideo"
       src="@/assets/videos/bg-history.mp4"
       class="bg"
       autoplay
       loop
+      webkit-playsinline="true"
+      playsinline="true"
     />
     <button
       class="back"
@@ -86,6 +89,8 @@
               class="bg"
               autoplay
               loop
+              webkit-playsinline="true"
+              playsinline="true"
             />
             <iframe
               :src="`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(item.filePath)}`"
@@ -119,6 +124,8 @@
               class="bg"
               autoplay
               loop
+              webkit-playsinline="true"
+              playsinline="true"
             />
             <video
               :src="item.filePath"
@@ -151,6 +158,8 @@
               class="bg"
               autoplay
               loop
+              webkit-playsinline="true"
+              playsinline="true"
             />
             <img
               draggable="false"
@@ -267,6 +276,14 @@ export default {
     const route = useRoute()
 
     /**
+     * 针对微信中背景视频无法自动播放的问题
+     */
+    const bgVideo = ref(null)
+    onMounted(() => {
+      bgVideo.value.play()
+    })
+
+    /**
      * tab bar
      */
     const activeTabIndex = ref(0)
@@ -402,6 +419,7 @@ export default {
     return {
       activeSwiperItemIndex,
       activeTabIndex,
+      bgVideo,
       bgAudio,
       cancelFullScreen,
       canRecord,