首页 威武短视频文章正文

短视频解析(短视频解析下载 去水印保存)

威武短视频 2022年06月07日 09:51 127 威武短视频

目前应该是有很多小伙伴对于短视频解析方面的信息比较感兴趣，现在小编就收集了一些与短视频解析下载 去水印保存相关的信息来分享给大家，感兴趣的小伙伴可以接着往下看，希望会帮助到你哦。

我们知道你天天刷抖音的时候可以上滑切换视频，互不影响。那么我们站在前端的角度能否可以实现这种效果呢？
这是我的个人项目：臻美MV

短视频解析(短视频解析下载 去水印保存)

下面我是用Vue写的，现在我把它开源。

Vue：

初始界面

<template>
<div class="box jz">
<div>
<img src="../assets/MV.png" alt="">
</div>
<mu-button fab color="primary" @click="go" class="go" >
<mu-icon value="arrow_right_alt" color="white" size="34"></mu-icon>
</mu-button>
</div>
</template>

<script>
export default {
name: 'index',
data () {
return {
msg: ''
}
},
methods: {
go () {
this.$router.push({
name: 'mv',
params: {
id: this.$store.state.id
}
})
}
},
mounted () {
this.$axios.get(['/top/mv?limit=5'])
.then((response) => {
// success
let num = Math.floor(Math.random() * 5 + 1)
localStorage.setItem('i', num)
console.log(response.data.data)
localStorage.setItem('list', JSON.stringify(response.data.data[num]))
this.$store.state.id = response.data.data[num].id
})
.catch((error) => {
// error
console.log(error)
})
}

}
</script>
<style scoped>
@keyframes my{
from{opacity: 0;}
to{opacity: 1;}
}
.go{margin-top:60px ;}
.jz{animation:my 0.3s;}
.box{text-align: center;}
.box img{width: 25%;margin-top:25vh;}
</style>

MV界面

<template>
<div class="box">
<v-carousel :cycle="false" :show-arrows="false" hide-delimiters @change="f(index1)" v-model="index1" class="view" height="100vh">
<v-carousel-item v-for="(item,index) in list" :key="index" class="item" @touchstart="cl">
<div class="inner">
<video :src="url" autoplay="autoplay" v-if="playIndex==index"></video>
<div class="foot">
<div class="in">
<p class="user">@ {{item.artistName}}</p>
<p class="name">{{item.name}}</p>
</div>
<div class="pl">
<mu-icon value="speaker_notes" @click="openBotttomSheet" color="white" size="32"></mu-icon>
</div>
</div>
</div>
</v-carousel-item>
</v-carousel>
<mu-bottom-sheet :open.sync="open" class="sheet">
<mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
<div v-for="(item,index) in plist" :key='index' class="ovf pll">
<div class="pl-l"><img :src="item.user.avatarUrl" alt=""></div>
<div class="pl-r">
<div class="name1">{{item.user.nickname}}</div>
<div class="con">{{item.content}}</div>
</div>
</div>
</mu-load-more>
</mu-bottom-sheet>
</div>
</template>

<script>import {mapGetters} from 'vuex'
export default {
name: 'mv',
data () {
return {
name: '',
user: '',
index1: '',
url: '',
list: [],
num: 1,
playIndex: null,
open: false,
idd: '',
plist: '',
num1: 0,
refreshing: false,
loading: false
}
},
methods: {
//下滑重新加载更多评论
refresh () {
this.refreshing = true
this.$refs.container.scrollTop = 0
setTimeout(() => {
this.refreshing = false
this.$axios.get(['/comment/mv?id=' + this.idd]) //这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.comments)
this.plist = response.data.comments
})
.catch((error) => {
// error
console.log(error)
})
}, 2000)
},
//下滑加载更多评论

。。。。。。。。。。。。。

作者：Vam的金豆之路

篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/50731.html

本文结束，以上，就是短视频解析，短视频解析下载 去水印保存的全部内容了，如果大家还想了解更多，可以关注我们哦。

相关文章

发表评论

备案号：陕ICP备2022006270号-2 由网站地图强力收录 威武短视频