qier222
4 years ago
parent
e4ba16b9a2
commit
b399d5bbdc
@ -0,0 +1,29 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function mvDetail(mvid) {
|
||||
return request({
|
||||
url: "/mv/detail",
|
||||
method: "get",
|
||||
params: {
|
||||
mvid,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function mvUrl(params) {
|
||||
// 必选参数 : id: mv id
|
||||
// 可选参数 : r: 分辨率,默认1080,可从 /mv/detail 接口获取分辨率列表
|
||||
return request({
|
||||
url: "/mv/url",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function simiMv(mvid) {
|
||||
return request({
|
||||
url: "/simi/mv",
|
||||
method: "get",
|
||||
params: { mvid },
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="mv-row">
|
||||
<div class="mv" v-for="mv in mvs" :key="mv.id">
|
||||
<div class="cover-container">
|
||||
<img
|
||||
class="cover"
|
||||
:src="getUrl(mv)"
|
||||
@mouseover="hoverVideoID = mv.id"
|
||||
@mouseleave="hoverVideoID = 0"
|
||||
@click="goToMv(mv.id)"
|
||||
/>
|
||||
<transition name="fade">
|
||||
<img
|
||||
class="shadow"
|
||||
v-show="hoverVideoID === mv.id"
|
||||
:src="getUrl(mv)"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<router-link :to="'/mv/' + mv.id">{{ mv.name }}</router-link>
|
||||
</div>
|
||||
<div class="artist">
|
||||
<router-link
|
||||
v-if="subtitle === 'artist'"
|
||||
:to="'/artist/' + mv.artistId"
|
||||
>{{ mv.artistName }}</router-link
|
||||
>
|
||||
<span v-if="subtitle === 'publishTime'">{{ mv.publishTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CoverVideo",
|
||||
props: {
|
||||
mvs: Array,
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: "artist",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverVideoID: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goToMv(id) {
|
||||
this.$router.push({ path: "/mv/" + id });
|
||||
},
|
||||
getUrl(mv) {
|
||||
if (mv.cover !== undefined) return mv.cover;
|
||||
if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
|
||||
if (mv.coverUrl !== undefined) return mv.coverUrl;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mv-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.mv {
|
||||
margin: 12px 12px 24px 12px;
|
||||
width: 204px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
position: relative;
|
||||
.cover {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-size: cover;
|
||||
transition: 0.3s;
|
||||
width: 200px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
position: absolute;
|
||||
filter: blur(16px) opacity(0.6);
|
||||
z-index: -1;
|
||||
width: 200px;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="mv">
|
||||
<div class="current-video">
|
||||
<div class="video">
|
||||
<video ref="videoPlayer" class="plyr"></video>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="title">
|
||||
<router-link :to="'/artist/' + mv.data.artistId">{{
|
||||
mv.data.artistName
|
||||
}}</router-link>
|
||||
-
|
||||
{{ mv.data.name }}
|
||||
</div>
|
||||
<div class="info">
|
||||
{{ mv.data.playCount }} Views · {{ mv.data.publishTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-video">
|
||||
<div class="section-title">More Videos</div>
|
||||
<MvRow :mvs="simiMvs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NProgress from "nprogress";
|
||||
import { mvDetail, mvUrl, simiMv } from "@/api/mv";
|
||||
import Plyr from "plyr";
|
||||
import "@/assets/css/plyr.css";
|
||||
|
||||
import MvRow from "@/components/MvRow.vue";
|
||||
|
||||
export default {
|
||||
name: "mv",
|
||||
components: {
|
||||
MvRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mv: {
|
||||
url: "",
|
||||
data: {
|
||||
name: "",
|
||||
artistName: "",
|
||||
playCount: "",
|
||||
publishTime: "",
|
||||
},
|
||||
},
|
||||
player: null,
|
||||
simiMvs: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData(id) {
|
||||
mvDetail(id).then((data) => {
|
||||
this.mv = data;
|
||||
let requests = data.data.brs.map((br) => {
|
||||
return mvUrl({ id, r: br.br });
|
||||
});
|
||||
Promise.all(requests).then((results) => {
|
||||
let sources = results.map((result) => {
|
||||
return {
|
||||
src: result.data.url,
|
||||
type: "video/mp4",
|
||||
size: result.data.r,
|
||||
};
|
||||
});
|
||||
console.table(sources);
|
||||
this.player.source = {
|
||||
type: "video",
|
||||
title: this.mv.data.name,
|
||||
sources: sources,
|
||||
poster: this.mv.data.cover,
|
||||
};
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
simiMv(id).then((data) => {
|
||||
this.simiMvs = data.mvs;
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.autoplay === "true")
|
||||
this.videoOptions.autoplay = true;
|
||||
},
|
||||
mounted() {
|
||||
let videoOptions = {
|
||||
settings: ["quality"],
|
||||
autoplay: false,
|
||||
quality: {
|
||||
default: 1080,
|
||||
options: [1080, 720, 480, 240],
|
||||
},
|
||||
};
|
||||
this.player = new Plyr(this.$refs.videoPlayer, videoOptions);
|
||||
this.player.volume = this.$store.state.player.volume;
|
||||
this.getData(this.$route.params.id);
|
||||
console.log("网易云你这mv音频码率也太糊了吧🙄");
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.getData(to.params.id);
|
||||
next();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.video {
|
||||
--plyr-color-main: #335eea;
|
||||
--plyr-control-radius: 8px;
|
||||
}
|
||||
|
||||
.mv {
|
||||
width: 100%;
|
||||
}
|
||||
.current-video {
|
||||
width: 100%;
|
||||
}
|
||||
.video {
|
||||
border-radius: 16px;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
margin-top: 12px;
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.artist {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-top: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-video {
|
||||
margin-top: 48px;
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue