crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gameplay页面显示视频

Browse Source
This commit is contained in:
cebgcontract 2022-02-22 19:22:56 +08:00
parent d1400b9226
commit 5623c852f4
4 changed files with 106 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -37,6 +37,10 @@
::-webkit-scrollbar {
width: 0 !important;height: 0;
}
.video-youtube-202202 iframe{
margin-top: -110px;
}
</style>
</head>
<body>

BIN
src/assets/202202/gameplay/video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

102
src/components/gameplay/VideoSection.vue
View File

@ -1,8 +1,20 @@
<template>
<div class="video-section">
<div class="video-bg"></div>
<div class="video-cover">
<img src="@/assets/202202/gameplay/video.png" alt="video">
</div>
<youtube
v-show="videoShow"
class="video-youtube-202202"
video-id="_SZ5pVCxmro"
:player-vars="playerVars"
player-width="1280"
player-height="720"
@ready="videoReady"
@ended="videoEnded"
></youtube>
<div class="play-btn" @click="showVideo" v-show="!videoShow"></div>
</div>
</template>
<script lang="ts">
@ -13,13 +25,99 @@ import { Component, Vue } from 'vue-property-decorator'
components: {
}
})
export default class extends Vue {}
export default class extends Vue {
private videoShow = false
private videoPlayer: any
private playerVars = {
autoplay: 1,
mute: 1,
loop: 1,
controls: 0
}
videoReady(event: any) {
console.log('video ready')
this.videoPlayer = event.target
// event.target.mute()
// event.target.playVideo()
}
videoEnded(event: any) {
console.log('video end')
event.target.mute()
event.target.playVideo()
}
showVideo() {
this.videoShow = true
this.videoPlayer.playVideo()
}
}
</script>
<style lang="scss" scoped>
.video-section{
position: relative;
margin-bottom: 50px;
max-width: 1920;
height: 500px;
.video-bg{
width:100%;
height: 450px;
position: absolute;
left:0;
top:0;
background-image: url('../../assets/202202/gameplay/video.png');
background-repeat: no-repeat;
background-position: top center;;
background-size: 100% 100%;
overflow: hidden;
&:after{
content: "";
width:150%;
height:150%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(35px);
}
}
.video-cover{
width: 1280px;
height: 500px;
margin: auto;
position: absolute;
left:0;
top:0;
right: 0;
filter: brightness(0.5);
&:hover {
filter: brightness(1);
}
}
.play-btn{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 162px;
height: 162px;
margin: auto;
background-image: url('../../assets/202202/gameplay/icon_play.png');
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.video-youtube-202202{
width: 1280px;
height: 500px;
margin: auto;
position: absolute;
left:0;
top:0;
right: 0;
overflow: hidden;
}
}
</style>

4
src/main.ts
View File

@ -6,10 +6,10 @@ import router from './router'
import store from './store'
import VueClipboard from 'vue-clipboard2'
// import 'video.js/dist/video-js.css'
// import VueYouTubeEmbed from 'vue-youtube-embed'
import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(ElementUI)
// Vue.use(VueYouTubeEmbed)
Vue.use(VueYouTubeEmbed)
Vue.use(VueClipboard)
Vue.config.productionTip = false