Skip to content

P
project-online-pc
提交 16f4407d authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

修改视频模块

上级 e3c1c039
隐藏空白字符变更
内嵌 并排
正在显示 包含 200 行增加 和 60 行删除
components/home/Video.vue
浏览文件 @ 16f4407d
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div class="video-wrapper" :class="className">
<div class="banner-content"> <div class="content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/video.png" /> <ul class="video-list">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/video_logo.png" @click="open" /> <li class="video-item" v-for="(item, index) in list" :key="index">
<video <div class="video-poster">
v-if="isShow === true" <img :src="item.poster" />
class="video" <div class="video-play" @click="open(item)" v-if="isMobile || index === 0"></div>
src="https://webapp-pub.ezijing.com/project/marywood/marywood.mp4" </div>
controls="controls" <div class="video-content">
preload="auto" <div class="video-title">{{ item.title }}</div>
autoplay="autoplay" <div class="video-desc">{{ item.desc }}</div>
x5-playsinline="" </div>
playsinline </li>
webkit-playsinline="true" </ul>
ref="video" <div class="video-next" @click="handleNext"></div>
></video>
<div class="overlay" v-if="isShow === true" @click="close"></div>
</div> </div>
<video
v-if="isShow === true"
class="video"
:src="playVideo.src"
controls="controls"
preload="auto"
autoplay="autoplay"
x5-playsinline=""
playsinline
webkit-playsinline="true"
ref="video"
></video>
<div class="overlay" v-if="isShow === true" @click="close"></div>
</div> </div>
</template> </template>
...@@ -24,16 +35,44 @@ ...@@ -24,16 +35,44 @@
export default { export default {
data() { data() {
return { return {
isShow: false isShow: false,
list: [
{
title: '玛丽伍德大学校长致词',
desc: 'Address from the President of Marywood University',
src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
},
{
title: '玛丽伍德介绍',
desc: 'The Introduction of Marywood Univeristy',
src: 'https://webapp-pub.ezijing.com/project/marywood/marywood.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
}
],
// 当前播放的视频
playVideo: {}
} }
}, },
computed: { computed: {
isMobile() { isMobile() {
return this.$store.state.isMobile return this.$store.state.isMobile
},
className() {
return {
'is-h5': this.isMobile,
'is-pc': !this.isMobile
}
} }
}, },
methods: { methods: {
open() { handleNext() {
// 第一个视频放到最后
const deleteVideo = this.list.splice(0, 1)
this.list = this.list.concat(deleteVideo)
},
open(item) {
this.playVideo = item
this.isShow = true this.isShow = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.video.play() this.$refs.video.play()
...@@ -52,6 +91,84 @@ export default { ...@@ -52,6 +91,84 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
margin-top: 56px;
.video-wrapper {
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/video_bg.png) no-repeat center center;
background-size: cover;
}
.content {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.video-list {
display: flex;
flex-wrap: nowrap;
height: 680px;
}
.video-item {
display: flex;
align-items: center;
position: relative;
}
.video-item + .video-item {
opacity: 0.4;
}
.video-poster {
position: relative;
width: 550px;
height: 550px;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
background-size: contain;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.video-content {
width: 490px;
padding: 20px;
box-sizing: border-box;
}
.video-title {
font-size: 40px;
font-weight: 400;
color: #ffffff;
}
.video-desc {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #ffffff;
}
.video-next {
position: absolute;
right: -40px;
top: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
background-size: contain;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.overlay { .overlay {
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -62,29 +179,13 @@ export default { ...@@ -62,29 +179,13 @@ export default {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.banner-content { .video {
position: relative; width: 80%;
width: 100%; position: fixed;
margin: 0 auto; left: 50%;
margin-top: 56px; top: 50%;
.img1 { transform: translate(-50%, -50%);
position: absolute; z-index: 10000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
width: 100%;
height: 100%;
}
.video {
width: 80%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
} }
} }
.is-h5 { .is-h5 {
...@@ -97,29 +198,68 @@ export default { ...@@ -97,29 +198,68 @@ export default {
z-index: 1999; z-index: 1999;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.banner-content { .video-list {
display: flex;
padding: 0 0.3rem;
overflow-x: auto;
}
.video-item {
width: 3.25rem;
}
.video-item + .video-item {
margin-left: 0.1rem;
}
.video-poster {
position: relative; position: relative;
width: 100%; width: 3.25rem;
margin: 0 auto; height: 2.04rem;
.img1 { img {
width: 0.42rem;
height: 0.42rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover;
} }
.video { &::after {
width: 100%; content: '';
position: fixed; position: absolute;
top: 50%; left: 0;
transform: translateY(-50%); right: 0;
z-index: 10000; bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
} }
} }
.video-play {
position: absolute;
top: 50%;
left: 50%;
width: 0.39rem;
height: 0.39rem;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
background-size: contain;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.video-content {
padding: 0.1rem 0;
}
.video-title {
text-align: center;
font-size: 0.12rem;
color: #484848;
}
.video-desc {
text-align: center;
font-size: 0.12rem;
color: #484848;
}
.video {
width: 100%;
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论