Adaptive layout Click the video to play in full screen, click the next video to pause the previous video
Full code:
<template>
<div class="container">
<div class="box" v-if="meData.length > 0">
<div class="box-item" v-for="item in meData" :key="item.id">
<div
class="video"
:style="{
'background-image': 'url(' + item.backgroundImage + ')'
}"
@click="btnFullScr('video' + item.id)"
>
<img
src="https://wx.applet.style.51dsx.cn/h5img/[email protected]"
alt=""
/>
<video
:id="'video' + item.id"
:poster="item.videologo"
controls="false"
style="object-fit: fill"
:src="item.videoUrl"
class="video_video"
preload="preload"
loop="loop"
width="100%"
x-webkit-airplay="allow"
x5-video-player-type="h5-page"
x5-video-player-fullscreen="true"
x5-video-orientation="landscape"
/>
</div>
<span>{
{ item.videoTitle }}</span>
<div class="item-bottom">
<div
class="bottom-left"
>
<img :src="item.logo" />
<span>{
{ item.username }}</span>
</div>
<div
class="bottom-right"
>
<img
src="https://wx.applet.style.51dsx.cn/h5img/[email protected]"
/>
<span>{
{ item.number }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
data() {
return {
meData: [
{
id: 303,
logo:
"https://image.51dsx.cn/user/face/00/00fd9771e7b322eeb166252083cf9fb5.jpg?60F15FEE",
number: 14376,
username: "郭荣",
videoLogo:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-image/76591681718990417.png",
videoTitle: "政策解读《数字中国建设整体布局规划》",
videoUrl:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-video/24871681718992219.mp4"
},
{
id: 267,
logo:
"https://image.51dsx.cn/user/face/00/00fd9771e7b322eeb166252083cf9fb5.jpg?60F15FEE",
number: 54252,
username: "郭荣",
videoLogo:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-image/75131678286678114.jpg",
videoTitle: "招商引资如何招？— 先看求什么？给什么？",
videoUrl:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-video/76521678286755718.mp4"
},
{
id: 252,
logo:
"https://image.51dsx.cn/user/face/00/00fd9771e7b322eeb166252083cf9fb5.jpg?60F15FEE",
number: 26518,
username: "郭荣",
videoLogo:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-image/99041673873808058.jpg",
videoTitle: "会找好老婆就能发现投资好项目",
videoUrl:
"https://51-dsx-video-1300426310.cos.ap-shanghai.myqcloud.com/51-dsx-video/55231673873829608.mp4"
}
]
};
},
methods: {
btnFullScr(id) {
const elVideo = document.getElementById(id);
if (this.playId && this.playId !== id) {
//判断不是上一个视频就关闭上一个视频
const aa = document.getElementById(this.playId);
aa.pause();
}
this.playId = id;
if (elVideo.requestFullscreen()) {
elVideo.requestFullscreen();
elVideo.play();
elVideo.style.display = "block";
} else if (elVideo.msRequestFullscreen) {
elVideo.msRequestFullscreen();
elVideo.play();
}
// 火狐浏览器
else if (elVideo.mozRequestFullScreen) {
elVideo.mozRequestFullScreen();
elVideo.play();
elVideo.style.display = "block";
}
// 谷歌浏览器、android浏览器
else if (elVideo.webkitRequestFullScreen) {
elVideo.webkitRequestFullScreen();
elVideo.play();
elVideo.style.display = "block";
}
}
}
};
</script>
<style scoped>
.container {
max-width: 7.5rem;
margin: 0 auto;
}
video {
width: 100%;
object-fit: cover !important;
}
video::-webkit-media-controls {
display: none !important;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 0 !important;
border: none !important;
}
.box-item {
margin: 0 0.071rem 0.12rem;
width: 45.8%;
}
.video {
width: 100%;
height: 1.6rem;
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.video img {
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 0.1rem;
right: 0.1rem;
}
.video_video {
width: 100%;
height: 100%;
background-color: #000;
z-index: 99999 !important;
background-repeat: no-repeat;
background-size: cover;
}
.box-item span {
padding-top: 0.04rem;
font-size: 0.14rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 0.21rem;
}
.item-bottom {
padding-top: 0.04rem;
display: flex;
justify-content: space-between;
}
.bottom-left,
.bottom-right {
display: flex;
align-items: center;
}
.bottom-left img {
width: 0.16rem;
height: 0.16rem;
border-radius: 0.08rem;
opacity: 1;
margin-top: 0.04rem;
}
.bottom-left span {
margin-left: 0.04rem;
font-size: 0.1rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #6b6b6b;
line-height: 0.21rem;
}
.bottom-right img {
width: 0.16rem;
height: 0.16rem;
opacity: 1;
}
.bottom-right span {
margin-left: 0.02rem;
font-size: 0.12rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #6b6b6b;
line-height: 0.21rem;
}
@media (max-width: 374px) {
.box-item{
width: 100% !important;
}
}
</style>