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

修改youtube视频的播放方式, 不再隐藏上下部分内容

Browse Source
This commit is contained in:
cebgcontract 2022-04-27 10:44:17 +08:00
parent 766128be22
commit f7141704a2
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -12,7 +12,6 @@
html * {font-family: 'Rajdhani',serif;font-weight: bold;} html * {font-family: 'Rajdhani',serif;font-weight: bold;}
body{overflow-x: hidden;scrollbar-width: none;} body{overflow-x: hidden;scrollbar-width: none;}
::-webkit-scrollbar {width: 0 !important;height: 0;display: none;} ::-webkit-scrollbar {width: 0 !important;height: 0;display: none;}
.video-youtube-202202 iframe{margin-top: -110px;}
.video-youtube-202202.mobile iframe{margin-top: -9vw;} .video-youtube-202202.mobile iframe{margin-top: -9vw;}
</style> </style>
</head> </head>

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

@ -2,7 +2,7 @@
<div class="video-section" :class="{'mobile': mobile}"> <div class="video-section" :class="{'mobile': mobile}">
<div class="video-bg"></div> <div class="video-bg"></div>
<div class="video-cover"> <div class="video-cover">
<img src="@/assets/202202/gameplay/video.jpg" alt="video"> <img :class="{'blur': playing}" src="@/assets/202202/gameplay/video.jpg" alt="video">
</div> </div>
<you-tube-player <you-tube-player
v-show="videoShow" v-show="videoShow"
@ -14,6 +14,7 @@
:player-height="videoHeight" :player-height="videoHeight"
@ready="videoReady" @ready="videoReady"
@ended="videoEnded" @ended="videoEnded"
@playing="videoPlaying"
></you-tube-player> ></you-tube-player>
<div class="play-btn" @click="showVideo" v-show="!videoShow"></div> <div class="play-btn" @click="showVideo" v-show="!videoShow"></div>
</div> </div>
@ -32,8 +33,9 @@ import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
export default class extends Vue { export default class extends Vue {
private videoShow = false private videoShow = false
private videoPlayer: any private videoPlayer: any
private videoWidth = 1280 private videoWidth = 888
private videoHeight = 720 private videoHeight = 500
private playing = false
private playerVars = { private playerVars = {
autoplay: 0, autoplay: 0,
mute: 1, mute: 1,
@ -47,10 +49,11 @@ export default class extends Vue {
mounted() { mounted() {
// {375, 146} // {375, 146}
// 640 x 360
const winWidth = window.innerWidth const winWidth = window.innerWidth
const mHeight = 211 * (winWidth / 375) const mHeight = 211 * (winWidth / 375)
this.videoWidth = this.mobile ? winWidth : 1280 this.videoWidth = this.mobile ? winWidth : 888
this.videoHeight = this.mobile ? mHeight : 720 this.videoHeight = this.mobile ? mHeight : 500
} }
get mobile() { get mobile() {
@ -64,6 +67,10 @@ export default class extends Vue {
// event.target.playVideo() // event.target.playVideo()
} }
videoPlaying(event: any) {
this.playing = true
}
videoEnded(event: any) { videoEnded(event: any) {
console.log('video end') console.log('video end')
event.target.mute() event.target.mute()
@ -113,9 +120,15 @@ export default class extends Vue {
top:0; top:0;
right: 0; right: 0;
filter: brightness(0.5); filter: brightness(0.5);
//overflow: hidden;
&:hover { &:hover {
filter: brightness(1); filter: brightness(1);
} }
img{
&.blur{
filter: blur(20px);
}
}
} }
.play-btn{ .play-btn{
position: absolute; position: absolute;
@ -133,7 +146,7 @@ export default class extends Vue {
cursor: pointer; cursor: pointer;
} }
.video-youtube-202202{ .video-youtube-202202{
width: 1280px; width: 888px;
height: 500px; height: 500px;
margin: auto; margin: auto;
position: absolute; position: absolute;