优化首页视频播放逻辑
This commit is contained in:
zyronon
parent
0471a28d76
commit
273c301c61
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "抖音",
|
||||
"name": "douyin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@ -200,6 +200,27 @@ export default {
|
||||
this.width = document.body.clientWidth
|
||||
this.line = this.$refs.line
|
||||
this.point = this.$refs.point
|
||||
let video = this.$refs.video
|
||||
video.currentTime = 0
|
||||
let fun = e => {
|
||||
this.currentTime = Math.ceil(e.target.currentTime)
|
||||
this.pageX = this.currentTime * this.step
|
||||
}
|
||||
video.addEventListener('timeupdate', fun)
|
||||
video.addEventListener('loadedmetadata', e => {
|
||||
this.duration = video.duration
|
||||
if (this.duration > 60) {
|
||||
this.step = this.width / Math.floor(this.duration)
|
||||
} else {
|
||||
video.removeEventListener('timeupdate', fun)
|
||||
}
|
||||
})
|
||||
video.addEventListener('play', e=>{
|
||||
this.isPlaying = true
|
||||
})
|
||||
video.addEventListener('pause', e=>{
|
||||
this.isPlaying = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
attention() {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
:virtual="true"
|
||||
:list="videos"
|
||||
:renderSlide="render"
|
||||
v-model:active-index="videoActiveIndex"
|
||||
>
|
||||
</SlideListVirtual>
|
||||
<Comment v-model:is-commenting="isCommenting"/>
|
||||
@ -149,32 +150,100 @@ export default {
|
||||
],
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
render: (item, index, list) => {
|
||||
console.log(item)
|
||||
let style = {}
|
||||
if (index !== undefined) {
|
||||
// style.top = (index - 1) * 812 + 'px'
|
||||
}
|
||||
videoActiveIndex: 0,
|
||||
render: (item, itemIndex, slideItemIndex) => {
|
||||
return (
|
||||
<div className="base-slide-item" data-index={index} style={style}>
|
||||
<Video1 disabled={false}
|
||||
<div className="base-slide-item" data-index={itemIndex}>
|
||||
<Video1 disabled={itemIndex !== 0}
|
||||
video={item}
|
||||
index={index}
|
||||
index={itemIndex}
|
||||
onShowShare={this.t}
|
||||
onVideoTest={this.t}
|
||||
v-model={[this.videos[index], 'video']}
|
||||
v-model={[this.videos[itemIndex], 'video']}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
videoActiveIndex(newVal) {
|
||||
console.log(newVal)
|
||||
$(".base-slide-item").each(function () {
|
||||
let video = $(this).find('video')
|
||||
if ($(this).data('index') === newVal) {
|
||||
video.trigger('play')
|
||||
} else {
|
||||
video.trigger('pause')
|
||||
setTimeout(() => {
|
||||
video[0].currentTime = 0
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
if (newVal === this.videos.length - 3) {
|
||||
[{
|
||||
videoUrl: mp40,
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: src1Bg,
|
||||
isLoved: true,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},
|
||||
{
|
||||
videoUrl: mp41,
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: src1Bg,
|
||||
isLoved: true,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},
|
||||
{
|
||||
videoUrl: mp42,
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: src1Bg,
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},
|
||||
{
|
||||
videoUrl: mp43,
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: src1Bg,
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},
|
||||
{
|
||||
videoUrl: mp44,
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: src1Bg,
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},].map(v => {
|
||||
this.videos.push(v)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
methods: {
|
||||
t(e) {
|
||||
console.log(this.videoActiveIndex)
|
||||
this.$refs.ssss.update(e.index)
|
||||
// console.log(this.videos)
|
||||
// this.isSharing = !this.isSharing
|
||||
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
},
|
||||
},
|
||||
render() {
|
||||
console.log('render')
|
||||
// console.log('render')
|
||||
// this.$console(this.list.slice(0, 2))
|
||||
return (
|
||||
<div id="base-slide-wrapper">
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
this.list.slice(0, 2).map((item, index) => {
|
||||
this.list.slice(0, 3).map((item, index) => {
|
||||
this.slideList.appendChild(this.getInsEl(item, index))
|
||||
})
|
||||
// await this.checkChildren(true)
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
$(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
|
||||
},
|
||||
getInsEl(v, index) {
|
||||
let slideVNode = this.renderSlide(v, index)
|
||||
let slideVNode = this.renderSlide(v, index, this.currentSlideItemIndex)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
@ -264,31 +264,34 @@ export default {
|
||||
} else {
|
||||
this.currentSlideItemIndex -= 1
|
||||
}
|
||||
// console.log(this.slideItems)
|
||||
// console.log(this.slideItems.length)
|
||||
let that = this
|
||||
if (this.virtual) {
|
||||
if (this.slideItems.length > 2) {
|
||||
if (this.slideItems.length > 4) {
|
||||
if (this.isDrawDown) {
|
||||
$("#base-slide-list .base-slide-item:first").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
|
||||
})
|
||||
let item = this.list[this.currentSlideItemIndex + 1]
|
||||
let s = $(this.getInsEl(item, this.currentSlideItemIndex + 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
this.slideList.appendChild(s[0])
|
||||
if (this.currentSlideItemIndex > 2) {
|
||||
let item = this.list[this.currentSlideItemIndex + 2]
|
||||
this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
|
||||
$("#base-slide-list .base-slide-item:first").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
$("#base-slide-list .base-slide-item:last").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
|
||||
})
|
||||
let item = this.list[this.currentSlideItemIndex - 1]
|
||||
let s = $(this.getInsEl(item, this.currentSlideItemIndex - 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
$('#base-slide-list').prepend(s)
|
||||
if (this.currentSlideItemIndex > 1) {
|
||||
let item = this.list[this.currentSlideItemIndex - 2]
|
||||
this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
|
||||
$("#base-slide-list .base-slide-item:last").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let item = this.list[this.currentSlideItemIndex + 1]
|
||||
console.log('this.list[this.currentSlideItemIndex + 1]', item)
|
||||
this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 1))
|
||||
if (this.isDrawDown) {
|
||||
let item = this.list[this.currentSlideItemIndex + 2]
|
||||
this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 2))
|
||||
}
|
||||
}
|
||||
this.checkChildren()
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user