根除行业案例视频无法播放问题,顺便让备案号最后加载。

This commit is contained in:
zhcnyuyang 2025-05-24 01:48:31 +08:00
parent bd7a637133
commit 565549fd30
4 changed files with 32 additions and 27 deletions

View File

@ -17,15 +17,10 @@ router.isReady().then(() => {
<template> <template>
<div id="contentPane"> <div id="contentPane">
<Toolbar></Toolbar> <Toolbar></Toolbar>
<div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="androidblackbar"></div>
<div v-if="$route.path === '/ContactUs'"> <div v-if="$route.path === '/ContactUs'">
<router-view/> <router-view/>
<CopyrightIcp></CopyrightIcp> <CopyrightIcp v-if="isContentLoaded"></CopyrightIcp>
<!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载则也加上 v-if -->
<!--
<div id="footer" v-if="isContentLoaded">
<Footer></Footer>
</div>
-->
</div> </div>
<div v-else id="defaultcontainer"> <div v-else id="defaultcontainer">
<div id="content"><router-view/></div> <div id="content"><router-view/></div>
@ -33,7 +28,7 @@ router.isReady().then(() => {
<div id="footer" v-if="isContentLoaded"> <div id="footer" v-if="isContentLoaded">
<Footer></Footer> <Footer></Footer>
</div> </div>
<CopyrightIcp></CopyrightIcp> <CopyrightIcp v-if="isContentLoaded"></CopyrightIcp>
</div> </div>
</div> </div>
</template> </template>
@ -42,6 +37,15 @@ router.isReady().then(() => {
@import "node_modules/bootstrap/scss/_functions.scss"; @import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss"; @import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss"; @import "node_modules/bootstrap/scss/_mixins.scss";
#androidblackbar{
background-color: black;
@include media-breakpoint-between(xs, md) {
height:70px;
}
@include media-breakpoint-up(md){
height: 95.17px;
}
}
#contentPane{ #contentPane{
display: flex; display: flex;

View File

@ -7,10 +7,10 @@ const { breakpoint } = useBootstrapBreakpoint();
<template> <template>
<div class="pageroot" id="aboutusroot"> <div class="pageroot" id="aboutusroot">
<div id="aboutusbanner" class="videorootbanner"> <div id="aboutusbanner" class="videorootbanner">
<img v-if="$isMobile.android.phone||$isMobile.android.tablet" <!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
src="/AboutusVideo.gif" <!-- src="/AboutusVideo.gif"-->
class="videoimg"/> <!-- class="videoimg"/>-->
<video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'" <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
poster="/AboutusVideoPreload.png" poster="/AboutusVideoPreload.png"
controls="" controls=""
id="abtbannervideo" id="abtbannervideo"

View File

@ -1,19 +1,22 @@
<script setup> <script setup>
import ExamplesContent from './ExamplesContent.vue'; import ExamplesContent from './ExamplesContent.vue';
import { useBootstrapBreakpoint } from './useBreakpoint.js'; // useBreakpoint.js
const { breakpoint } = useBootstrapBreakpoint();
</script> </script>
<template> <template>
<div class="pageroot" id="examplesprocessroot"> <div class="pageroot" id="examplesprocessroot">
<div id="examplebanner" class="videorootbanner"> <div id="examplebanner" class="videorootbanner">
<img v-if="$isMobile.android.phone||$isMobile.android.tablet" <!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
src="/ExpVideoPreload.png" <!-- src="/ExpVideoPreload.png"-->
class="videoimg"/> <!-- class="videoimg"/>-->
<video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'" <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
poster="/bannervideopreload.png" controls="controls" poster="/ExpVideoPreload.png"
id="bannervideo" muted autoplay="autoplay" loop="loop" controls=""
playsinline webkit-playsinline id="expbannervideo"
class="bannervideos" muted autoplay="autoplay"
x5-video-player-type="h5-page"> loop="loop" playsinline webkit-playsinline
class="bannervideos">
<source src="/ExpVideo.mp4" type="video/mp4"></source> <source src="/ExpVideo.mp4" type="video/mp4"></source>
</video> </video>
<video v-else <video v-else

View File

@ -7,10 +7,10 @@ const { breakpoint } = useBootstrapBreakpoint();
<template> <template>
<div id="homepageroot" class="pageroot"> <div id="homepageroot" class="pageroot">
<div id="homepagebanner" class="videorootbanner"> <div id="homepagebanner" class="videorootbanner">
<img v-if="$isMobile.android.phone||$isMobile.android.tablet" <!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
src="/bannervideopreload.png" <!-- src="/bannervideopreload.png"-->
class="videoimg"/> <!-- class="videoimg"/>-->
<video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'" <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
poster="/bannervideopreload.png" controls="" poster="/bannervideopreload.png" controls=""
id="bannervideo" muted autoplay="autoplay" loop="loop" id="bannervideo" muted autoplay="autoplay" loop="loop"
playsinline webkit-playsinline playsinline webkit-playsinline
@ -284,12 +284,10 @@ export default {
} }
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
//margin-left: 32px;
width: 326px; width: 326px;
} }
@include media-breakpoint-between(md, xl) { @include media-breakpoint-between(md, xl) {
//margin-left: 100px;
width: 326px; width: 326px;
} }