这里遇到一个工作场景，就是官网对于桌面端和移动端对于video的使用，以及添加首页帧， 自制播放按钮，移动端对于video需要添加x5-video-player-type="h5-page"
<!--
* @Description: Lite产品详情
* @Autor: ZF
* @Date: 2022-03-03
* @LastEditors: ZF
* @LastEditTime: 2022-04-24
-->
<template>
<div>
<div class="top flexCC">
<div class="banner">
<div class="banner-font">
<banner-font :data="bannerFont" >
<!-- <template #btn>
<a target="_blank" href="https://3.cn/106fwBc-B" class="btn">去购买<i class="iconfont"></i></a>
</template> -->
</banner-font>
</div>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/Air-product.png"/>
</div>
</div>
<div class="info">
<div style="position: relative;text-align: center;">
<img v-if="!controls" class="play" id="play-img" src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/playicon.png" @click="play" />
<video
loop
:controls="controls"
id="video"
class="video"
x5-video-player-type="h5-page"
poster="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-tvc.png"
src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/mv_air.mp4"
></video>
</div>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-03.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-04.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-05.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-06.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-07.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-08.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-09.png"/>
<img @click="toPage" src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-10.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-11.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-12.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-13.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-14.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-15.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-16.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-17.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-18.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-19.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-20.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-21.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-22.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-23.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-24.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/Air-sm-25.png"/>
</div>
<div class="infos">
<div style="position: relative;text-align: center;">
<img v-if="!controls2" class="play play2" id="play-img" src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-sm/playicon.png" @click="play2" />
<video
loop
:controls="controls2"
id="video2"
class="video"
x5-video-player-type="h5-page"
poster="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-tvc.png"
src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/mv_air.mp4"
></video>
</div>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-02.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-04.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-05.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-06.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-07.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-08.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-09.png"/>
<img @click="toPage" src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-10.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-11.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-12.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-13.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-14.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-15.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-16.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-17.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-18.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-19.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-20.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-21.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-22.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-23.png"/>
<img src="https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/air/Air-wide/Air-wide-24.png"/>
</div>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, getCurrentInstance, onMounted, watch, computed, HtmlHTMLAttributes, onBeforeMount } from 'vue';
import { default as BannerFont } from '@/components/bannerFontAirInfo/Index.vue';
import { default as Cart } from '@/components/cart/Index.vue';
import { default as SvgIcon } from '@/components/svgIcon/Index.vue';
import { useRouter } from 'vue-router'
import store from '@/store';
export default {
components: { BannerFont, Cart, SvgIcon },
setup(props:any,context:any) {
const state = reactive({
// 广告描述
bannerFont: {
top: "iFLYBUDS Air",
main: "轻轻一挂，",
foot: "状态开挂。",
bottom: "",
},
pause:true,
time:0,
width:0,
controls: false,
controls2: false,
});
const play = () => {
state.controls = !state.controls;
let video = document.getElementById('video') as HTMLVideoElement;
let dos = video.play();
// let dos2 = video2.play();
video.addEventListener('pause',()=>{
state.controls = false;
})
};
const play2 = () => {
state.controls2 = !state.controls2;
let video2 = document.getElementById('video2') as HTMLVideoElement;
let dos2 = video2.play();
video2.addEventListener('pause',()=>{
state.controls2 = false;
})
};
/* window.onresize = () => {
var video = <HTMLVideoElement>document.querySelector("#video");
var video2 = <HTMLVideoElement>document.querySelector("#video2");
console.log("video:",video,"video2:",video2);
if(document.body.clientWidth!=state.width&&document.body.clientWidth>768){
state.controls = false
video.pause()
video2.pause()
video.load();
video2.load();
}
state.width=document.body.clientWidth;
} */
window.onresize = () => {
var video = <HTMLVideoElement>document.querySelector("#video");
var video2 = <HTMLVideoElement>document.querySelector("#video2");
if(document.body.clientWidth>768){
/* video.addEventListener('timeupdate', function () { //结束
state.time=video.currentTime
}, false);
video2.currentTime=state.time;
video2.play(); */
state.controls = false
video.pause()
video.load();
}else if(document.body.clientWidth<768){
state.controls2 = false
video2.pause()
video2.load();
}
}
onMounted(() => {
resetTop();
});
const resetTop = () => {
let dom = document.getElementById("main") as HTMLElement;
dom.scrollTop = 0;
};
const router = useRouter();
const toPage = () => {
router.push('product-Kit')
};
return {
...toRefs(state),
toPage,
play,
play2
}
}
}
</script>
<style lang="scss" scoped="scoped">
//播放按钮
#play-img{
position: absolute;
z-index: 100;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
width: 50px;
}
.btn {
padding: 12px 46px 12px 24px;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
background-color: #462E00;
font-size: 18px;
border-radius: 30px;
margin-top: 20px;
display: inline-block;
position: relative;
i{
font-size: 12px;
position: absolute;
top: 18px;
right: 24px;
}
}
.btn:hover {
color: #000000;
background-color: #ffffff;
}
.top {
background-color: #F8F5F0;
width: 100%;
}
.banner{
position: relative;
img{
position: absolute;
}
&-font{
position: absolute;
}
}
.info{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 345px;
position: relative;
img{
width: 60%;
margin-top: -5px;
max-width: 768px;
}
}
.infos{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 345px;
position: relative;
img{
width: 60%;
margin-top: -5px;
}
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 428px){
.info{
img{
width: 100%;
min-width: unset;
}
video{
width: 100%;
min-width: unset;
}
.play{
top: 50%;
left: 50%;
transform: translate(-25px,-25px);
// opacity: 0.5;
}
}
.infos{
display: none;
}
.btn{
transform: scale(1.4);
margin-left: 25px;
}
.top{
height: 551px;
min-width: 345px;
width: 100%;
}
.banner{
width: 320px;
height: 551px;
img{
top: 16px;
width: 320px;
height: 320px;
right: 0px;
}
&-font{
transform: scale(0.7);
bottom: -10px;
width: 390px;
}
}
}
@media screen and (min-width: 428px) and (max-width: 768px){
.info{
img{
width: 100%;
min-width: unset;
}
video{
// display: none;
width: 100%;
min-width: unset;
}
.play{
top: 50%;
left: 50%;
transform: translate(-25px,-25px);
// opacity: 0.5;
}
}
.infos{
display: none;
}
.btn{
transform: scale(1.3);
margin-left: 25px;
}
.top{
height: 675px;
}
.banner{
width: 428px;
height: 675px;
img{
top: 24px;
width: 428px;
height: 428px;
right: 0px;
}
&-font{
transform: scale(.77);
left: 5px;
bottom: -10px;
}
}
}
@media screen and (min-width: 768px) and (max-width: 976px){
.info{
display: none;
/* video{
display: none;
} */
}
.infos{
img{
width: 768px;
}
video{
width: 768px;
}
}
.info-lite{
width: 60%;
}
.btn{
transform: scale(1.3);
margin-left: 25px;
}
.top{
height: 512px;
}
.banner{
width: 768px;
height: 512px;
img{
top: 0px;
width: 512px;
height: 512px;
right: -28px;
}
&-font{
transform: scale(.77);
left: -9px;
bottom: 80px;
}
}
}
@media screen and (min-width: 976px) and (max-width: 1280px){
.info{
display: none;
}
.infos{
img{
width: 100%;
}
video{
width: 100%;
}
}
.info-lite{
width: 60%;
}
.top{
height: 512px;
}
.banner{
width: 874px;
height: 512px;
img{
top: 0px;
width: 512px;
height: 512px;
right: 0px;
}
&-font{
left: 48px;
top: 152.5px;
}
}
}
@media screen and (min-width: 1280px){
.info{
display: none;
}
#video{
display: none;
}
.infos{
img{
width:1280px;
}
video{
width: 1280px;
}
}
.info-lite{
width: 60%;
}
.top{
height: 640px;
}
.banner{
width: 1050px;
height: 640px;
img{
top: 0px;
right: 0px;
}
&-font{
left: 48px;
top: 199px;
}
}
}
</style>
