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 { ::-webkit-scrollbar {
width: 0 !important;height: 0; width: 0 !important;height: 0;
} }
.video-youtube-202202 iframe{
margin-top: -110px;
}
</style> </style>
</head> </head>
<body> <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> <template>
<div class="video-section"> <div class="video-section">
<div class="video-bg"></div>
<div class="video-cover"> <div class="video-cover">
<img src="@/assets/202202/gameplay/video.png" alt="video">
</div> </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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -13,13 +25,99 @@ import { Component, Vue } from 'vue-property-decorator'
components: { 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.video-section{ .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{ .video-cover{
width: 1280px; width: 1280px;
height: 500px; 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> </style>

4
src/main.ts
View File

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