备份

src/components/HeaderVideo.vue

@@ -11,15 +11,22 @@ name: "HeaderVideo"
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
-   <video poster="/logobeginweppld.png" controls="controls"
+   <video v-if="$isMobile.phone" poster="/logobeginweppld.png" controls="controls"
-          id="wepstart" muted autoplay
+          id="wepstart" muted autoplay preload="auto"
           playsinline webkit-playsinline
           class="startvideo"
           x5-video-player-type="h5-page">
      <source src="/logobeginwep.mp4" type="video/mp4"></source>
    </video>
-   <video poster="/logobeginPCpld.png"
+   <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png" controls="controls"
-          id="pcstart" muted autoplay
+          id="pcstart" muted autoplay preload="auto"
+          playsinline webkit-playsinline
+          class="startvideo"
+          x5-video-player-type="h5-page">
+     <source src="/logobeginPC.mp4" type="video/mp4"></source>
+   </video>
+   <video v-else poster="/logobeginPCpld.png"
+          id="pcstart" muted autoplay preload="auto"
           playsinline webkit-playsinline
           class="startvideo"
           x5-video-player-type="h5-page">
@@ -49,21 +56,21 @@ name: "HeaderVideo"
 #wepstart{
   @include media-breakpoint-between(xs, md) {
     visibility: visible;
-    height: 100%!important;
+    //height: 100%!important;
   }
   @include media-breakpoint-up(md) {
     visibility: collapse;
-    height: 0!important;
+    //height: 0!important;
   }
 }
 #pcstart{
   @include media-breakpoint-between(xs, md) {
     visibility: collapse;
-    height: 0!important;
+    //height: 0!important;
   }
   @include media-breakpoint-up(md) {
     visibility: visible;
-    height: 100%!important;
+    //height: 100%!important;
   }
 }
 #beginbottom {
@@ -108,7 +115,7 @@ name: "HeaderVideo"
 }
 .startvideo{
   width: 100%;
-  //height: 100%;
+  height: 100%;
   @include media-breakpoint-between(xs, md) {
     object-fit: contain;
   }

src/start.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import Start from './Start.vue'
 import router from './startRouter.js'
 import axios from 'axios'
+import isMobile from 'ismobilejs'
 
 // 引入Bootstrap CSS
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -11,4 +12,17 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 const app = createApp(Start)
 axios.defaults.baseURL = 'https://cms.yangprivate.site'
 app.config.globalProperties.$axios = axios
+// 安全地获取 User Agent 并进行检测
+let mobileDetectResult;
+if (typeof navigator !== 'undefined') {
+    // isMobile() 函数需要一个 user-agent 字符串作为参数
+    mobileDetectResult = isMobile(navigator.userAgent);
+} else {
+    // 为服务器端渲染 (SSR) 或其他非浏览器环境提供回退
+    // isMobile('') 会返回一个所有检测标志都为 false 的对象
+    mobileDetectResult = isMobile('');
+}
+
+app.config.globalProperties.$isMobile = mobileDetectResult;
+
 app.use(router).mount('#start')

start.html

@@ -6,6 +6,8 @@
     <link rel="apple-touch-icon" href="/iFavicon.png">
     <link rel="shortcut icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>KDesign - 欢迎光临</title>
 </head>
 <style>