优化视频组件
This commit is contained in:
zyronon
parent
be78b58377
commit
bdc44edceb
@ -9,8 +9,8 @@
|
||||
:autoplay="isPlay" loop>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
|
||||
<div class="float" :style="{opacity: isUp?0:1}" @click="togglePlayVideo">
|
||||
<img src="../assets/img/icon/play-white.png" class="pause" v-if="paused">
|
||||
<div class="float" :style="{opacity: isUp?0:1}">
|
||||
<div :style="{opacity:isMove ? 0:1}" class="normal">
|
||||
<div class="toolbar mb1r">
|
||||
<div class="avatar-ctn mb4r">
|
||||
@ -97,7 +97,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress"
|
||||
v-if="duration > 60"
|
||||
:class="progressClass"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
@ -122,7 +121,7 @@ import {mapState} from "vuex";
|
||||
import Loading from "./Loading";
|
||||
|
||||
export default {
|
||||
name: "Video",
|
||||
name: "BVideo",
|
||||
components: {
|
||||
BaseMarquee,
|
||||
BaseMusic,
|
||||
@ -182,6 +181,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
paused: false,
|
||||
name: `v-${this.prefix}-${this.index}-video`,
|
||||
globalMethods: globalMethods,
|
||||
duration: 0,
|
||||
@ -217,8 +217,8 @@ export default {
|
||||
video.addEventListener('loadedmetadata', e => {
|
||||
this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
|
||||
this.duration = video.duration
|
||||
if (this.duration > 60) {
|
||||
// if (this.duration > 6) {
|
||||
// if (this.duration > 60) {
|
||||
if (this.duration > 6) {
|
||||
this.step = this.width / Math.floor(this.duration)
|
||||
video.addEventListener('timeupdate', fun)
|
||||
}
|
||||
@ -227,16 +227,22 @@ export default {
|
||||
let eventTester = (e, t) => {
|
||||
video.addEventListener(e, () => {
|
||||
if (e === 'playing') this.loading = false
|
||||
if (e === 'progress') this.loading = true
|
||||
if (e === 'waiting') this.loading = true
|
||||
//
|
||||
if (e === 'waiting') {
|
||||
// console.log('paused',this.paused)
|
||||
console.log('!this.paused ', !this.paused)
|
||||
console.log(' !this.isPlaying', !this.isPlaying)
|
||||
if (!this.paused && !this.isPlaying) {
|
||||
this.loading = true
|
||||
}
|
||||
}
|
||||
console.log(e, t)
|
||||
}, false);
|
||||
}
|
||||
|
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
|
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
|
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
|
||||
eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
|
||||
// eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
|
||||
// // eventTester("suspend", '延迟下载'); //延迟下载
|
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
|
||||
// eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
|
||||
@ -257,9 +263,20 @@ export default {
|
||||
// eventTester("durationchange", '资源长度改变'); //资源长度改变
|
||||
// eventTester("volumechange", '音量改变'); //音量改变
|
||||
|
||||
//这里不能用this.name，因为class可能还没绑上去。可以找不到dom
|
||||
let videoWrapper = new Dom(this.$refs.videoWrapper)
|
||||
videoWrapper.on('play', this.play)
|
||||
videoWrapper.on('stop', this.stop)
|
||||
videoWrapper.on('singleClick', () => {
|
||||
if (this.isPlaying) {
|
||||
this.pause()
|
||||
this.paused = true
|
||||
} else {
|
||||
this.play()
|
||||
this.paused = false
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
@ -267,6 +284,7 @@ export default {
|
||||
new Dom(`.${this.name}-music`).trigger('start')
|
||||
// console.log('trigger-play')
|
||||
this.isPlaying = true
|
||||
this.paused = false
|
||||
if (this.currentTime !== -1) {
|
||||
this.$refs.video.currentTime = this.currentTime
|
||||
}
|
||||
@ -278,6 +296,7 @@ export default {
|
||||
new Dom(`.${this.name}-music`).trigger('stop')
|
||||
// console.log('trigger-stop')
|
||||
this.$refs.video.pause()
|
||||
this.paused = false
|
||||
this.isPlaying = false
|
||||
this.$refs.video.currentTime = 0
|
||||
},
|
||||
@ -288,13 +307,6 @@ export default {
|
||||
this.$refs.video.pause()
|
||||
this.isPlaying = false
|
||||
},
|
||||
//切换视频状态
|
||||
togglePlayVideo(e) {
|
||||
console.log('togglePlayVideo')
|
||||
if (!this.isPlaying) {
|
||||
this.play()
|
||||
}
|
||||
},
|
||||
$likeNum(v) {
|
||||
return globalMethods.$likeNum(v)
|
||||
},
|
||||
@ -308,7 +320,6 @@ export default {
|
||||
this.isAttention = true
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
loved(e, index) {
|
||||
this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
this.$emit('update:video', this.lVideo)
|
||||
@ -317,7 +328,8 @@ export default {
|
||||
this.pageX = e.touches[0].pageX
|
||||
},
|
||||
move(e) {
|
||||
if (this.isPlaying) return
|
||||
// console.log('move',e)
|
||||
// if (this.isPlaying) return
|
||||
this.isMove = true
|
||||
this.pause()
|
||||
this.pageX = e.touches[0].pageX
|
||||
@ -374,7 +386,6 @@ export default {
|
||||
margin: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation: pause-animation 1.1s linear;
|
||||
|
||||
@ -344,25 +344,25 @@ export default {
|
||||
this.videos = {
|
||||
my: {
|
||||
list: [],
|
||||
total: -1,
|
||||
childs: -1,
|
||||
pageNo: 0
|
||||
},
|
||||
private: {
|
||||
list: [],
|
||||
total: -1
|
||||
childs: -1
|
||||
},
|
||||
like: {
|
||||
list: [],
|
||||
total: -1
|
||||
childs: -1
|
||||
},
|
||||
collect: {
|
||||
video: {
|
||||
list: [],
|
||||
total: -1,
|
||||
childs: -1,
|
||||
},
|
||||
audio: {
|
||||
list: [],
|
||||
total: -1,
|
||||
childs: -1,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<IndicatorHome
|
||||
v-hide="isUp"
|
||||
name="main"
|
||||
v-model:index="index"
|
||||
v-model:index="baseIndex"
|
||||
/>
|
||||
<SlideHorizontal
|
||||
name="main"
|
||||
v-model:index="index"
|
||||
v-model:index="baseIndex"
|
||||
style="height: calc(100% - 5rem);"
|
||||
>
|
||||
<div class="slide-item">
|
||||
@ -40,9 +40,11 @@
|
||||
:style="marginTop"
|
||||
ref="virtualList"
|
||||
:list="videos"
|
||||
:prefix="videoPrefix[0]"
|
||||
:renderSlide="render"
|
||||
v-model:index="videoIndex"
|
||||
@end="end"
|
||||
@load-more="loadMore"
|
||||
/>
|
||||
</div>
|
||||
</SlideHorizontal>
|
||||
@ -70,6 +72,7 @@ import IndicatorHome from "./IndicatorHome";
|
||||
import SlideVerticalInfinite from "./SlideVerticalInfinite";
|
||||
import Comment from "../../components/Comment";
|
||||
import enums from "../../utils/enums";
|
||||
import bus from "../../utils/bus";
|
||||
|
||||
export default {
|
||||
name: "slide",
|
||||
@ -84,9 +87,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
baseIndex: 0,
|
||||
videoIndex: 5,
|
||||
closeOne: true,
|
||||
videoPrefix: ['one', 'two', 'three'],
|
||||
loading: false,
|
||||
videos: [
|
||||
{
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
@ -602,7 +607,6 @@ export default {
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"id": "0b1fb9c4-9d5c-40f7-9a01-1310674cbfeb",
|
||||
video: 'http://douyin.ttentau.top/7.mp4',
|
||||
@ -1449,13 +1453,13 @@ export default {
|
||||
showChangeNote: false,
|
||||
shareToFriend: false,
|
||||
|
||||
|
||||
render: (item, itemIndex, play) => {
|
||||
render: (item, itemIndex, play, prefix) => {
|
||||
return (
|
||||
<div className={`slide-item video-slide-item video-slide-item-${itemIndex}`} data-index={itemIndex}>
|
||||
<div class="slide-item" data-index={itemIndex}>
|
||||
<BVideo
|
||||
isPlay={play}
|
||||
video={item}
|
||||
prefix={prefix}
|
||||
index={itemIndex}
|
||||
onShowComments={e => this.isCommenting = true}
|
||||
onShowShare={e => this.isSharing = true}
|
||||
@ -1483,11 +1487,20 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getData()
|
||||
bus.on('singleClick', () => {
|
||||
new Dom(`.v-${this.videoPrefix[this.baseIndex]}-${this.videoIndex}-video`).trigger('singleClick')
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
return
|
||||
if (!this.loading) {
|
||||
this.pageNo++
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
t() {
|
||||
this.isUp = !this.isUp
|
||||
},
|
||||
@ -1497,6 +1510,7 @@ export default {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
|
||||
console.log(res)
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.totalSize = res.data.total
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
wrapper: null,
|
||||
total: 0,
|
||||
childs: 0,
|
||||
lIndex: 0,
|
||||
wrapperWidth: 0,
|
||||
wrapperHeight: 0,
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.wrapper = this.$refs.wrapper
|
||||
this.total = this.wrapper.children.length
|
||||
this.childs = this.wrapper.children.length
|
||||
this.wrapperWidth = this.$getCss(this.wrapper, 'width')
|
||||
this.wrapperHeight = this.$getCss(this.wrapper, 'height')
|
||||
},
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
this.moveY = e.touches[0].pageY - this.startY
|
||||
|
||||
let isRight = this.moveX < 0
|
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.total - 1 && isRight)) return
|
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.childs - 1 && isRight)) return
|
||||
|
||||
|
||||
this.checkDirection(e)
|
||||
@ -85,7 +85,7 @@ export default {
|
||||
},
|
||||
touchEnd(e) {
|
||||
let isRight = this.moveX < 0
|
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.total - 1 && isRight)) this.next = false
|
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.childs - 1 && isRight)) this.next = false
|
||||
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
@ -98,19 +98,18 @@ export default {
|
||||
this.lIndex--
|
||||
}
|
||||
}
|
||||
this.reset()
|
||||
},
|
||||
reset() {
|
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.wrapper, 'transform',
|
||||
`translate3d(${this.getDistance()}px, 0, 0)`)
|
||||
|
||||
this.$emit('update:index', this.lIndex)
|
||||
|
||||
this.reset()
|
||||
},
|
||||
reset() {
|
||||
this.moveX = 0
|
||||
this.next = false
|
||||
this.needCheck = true
|
||||
this.startTime = null
|
||||
this.$emit('update:index', this.lIndex)
|
||||
bus.emit(this.name + '-end', this.lIndex)
|
||||
},
|
||||
getDistance() {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import bus from "../../utils/bus";
|
||||
import {mapState} from "vuex";
|
||||
import * as Vue from "vue";
|
||||
import Dom from "../../utils/dom";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -9,6 +10,10 @@ export default {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
renderSlide: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
@ -33,7 +38,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
wrapper: null,
|
||||
total: 0,
|
||||
childs: 0,
|
||||
lIndex: 0,
|
||||
wrapperWidth: 0,
|
||||
wrapperHeight: 0,
|
||||
@ -51,11 +56,42 @@ export default {
|
||||
computed: {
|
||||
...mapState(['judgeValue', 'homeRefresh'])
|
||||
},
|
||||
watch: {
|
||||
lIndex(newVal, oldVal) {
|
||||
new Dom(this.wrapper).find(`.v-${this.prefix}-${newVal}-video`).trigger('play')
|
||||
setTimeout(() => {
|
||||
new Dom(this.wrapper).find(`.v-${this.prefix}-${oldVal}-video`).trigger('stop')
|
||||
}, 200)
|
||||
if (newVal >= this.list.length - 3) {
|
||||
this.$emit('load-more')
|
||||
}
|
||||
},
|
||||
list(newVal, oldVal) {
|
||||
// console.log('watch', newVal.length, oldVal.length)
|
||||
if (oldVal.length === 0) {
|
||||
this.insertContent()
|
||||
} else {
|
||||
let end = oldVal.length + 3
|
||||
let top = $(this.wrapper).find(".slide-item:last").css('top')
|
||||
|
||||
newVal.slice(oldVal.length, end).map((item, index) => {
|
||||
let el = this.getInsEl(item, oldVal.length + index)
|
||||
//这里必须要设置个top值，不然会把前面的条目给覆盖掉
|
||||
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
|
||||
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
|
||||
// 计算top值的，会和前面的对不上
|
||||
$(el).css('top', top)
|
||||
this.wrapper.appendChild(el)
|
||||
})
|
||||
this.childs = this.wrapper.children.length
|
||||
// console.log(this.childs)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.lIndex = this.index
|
||||
this.checkChildren()
|
||||
this.insertContent()
|
||||
this.total = this.wrapper.children.length
|
||||
},
|
||||
methods: {
|
||||
checkChildren() {
|
||||
@ -75,13 +111,13 @@ export default {
|
||||
end = this.list.length
|
||||
start = end - 5
|
||||
}
|
||||
console.log('start', start)
|
||||
console.log('end', end)
|
||||
if (start < 0) start = 0
|
||||
// console.log('start', start)
|
||||
// console.log('end', end)
|
||||
this.list.slice(start, end).map(
|
||||
(item, index) => {
|
||||
let el = null
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
el = this.getInsEl(item, start + index, start + index === this.lIndex)
|
||||
let el = this.getInsEl(item, start + index, start + index === this.lIndex)
|
||||
this.wrapper.appendChild(el)
|
||||
}
|
||||
)
|
||||
@ -97,10 +133,11 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.childs = this.wrapper.children.length
|
||||
},
|
||||
getInsEl(item, index, play = false) {
|
||||
// console.log('index',index,play)
|
||||
let slideVNode = this.renderSlide(item, index, play)
|
||||
let slideVNode = this.renderSlide(item, index, play, this.prefix)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
@ -162,28 +199,27 @@ export default {
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
if (Math.abs(this.moveY) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveY) > (this.wrapperHeight / 4)) gapTime = 100
|
||||
if (Math.abs(this.moveY) > (this.wrapperHeight / 3)) gapTime = 100
|
||||
if (gapTime < 150 && this.next) {
|
||||
if (isDown) {
|
||||
this.lIndex++
|
||||
} else {
|
||||
this.lIndex--
|
||||
}
|
||||
// console.log(this.total)
|
||||
|
||||
let that = this
|
||||
if (isDown) {
|
||||
let addItemIndex = this.lIndex + 2
|
||||
let res = $(that.wrapper).find(`.slide-item[data-index=${addItemIndex}]`)
|
||||
if (this.total < this.virtualTotal) {
|
||||
if (this.childs < this.virtualTotal) {
|
||||
if (res.length === 0) {
|
||||
this.wrapper.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
|
||||
}
|
||||
}
|
||||
if (this.total === this.virtualTotal
|
||||
if (this.childs === this.virtualTotal
|
||||
&& this.lIndex >= (this.virtualTotal + 1) / 2
|
||||
&& this.lIndex <= this.list.length - 3
|
||||
) {
|
||||
// console.log(videos)
|
||||
if (res.length === 0) {
|
||||
this.wrapper.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
|
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:first").data('index')).unmount()
|
||||
@ -193,35 +229,48 @@ export default {
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.total > this.virtualTotal) {
|
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:first").data('index')).unmount()
|
||||
if (this.childs > this.virtualTotal) {
|
||||
$(that.wrapper).find(".slide-item").each(function () {
|
||||
let index = $(this).data('index')
|
||||
if (index < (that.lIndex - 2)) {
|
||||
that.appInsMap.get(index).unmount()
|
||||
}
|
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = this.lIndex - 2
|
||||
let res = $(that.wrapper).find(`.slide-item[data-index=${addItemIndex}]`)
|
||||
|
||||
if (this.lIndex > 1 && this.lIndex <= this.list.length - 4) {
|
||||
let addItemIndex = this.lIndex - 2
|
||||
this.wrapper.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex))
|
||||
if (res.length === 0) {
|
||||
this.wrapper.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex))
|
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:last").data('index')).unmount()
|
||||
// $(that.wrapper).find(".base-slide-item:last").remove()
|
||||
$(that.wrapper).find(".slide-item").each(function () {
|
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (this.childs > this.virtualTotal) {
|
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:last").data('index')).unmount()
|
||||
// $(that.wrapper).find(".base-slide-item:last").remove()
|
||||
$(that.wrapper).find(".slide-item").each(function () {
|
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
this.childs = this.wrapper.children.length
|
||||
}
|
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`)
|
||||
|
||||
this.$setCss(this.wrapper, 'transform',
|
||||
`translate3d(0,${this.getDistance()}px, 0)`)
|
||||
this.reset()
|
||||
},
|
||||
reset() {
|
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.wrapper, 'transform',
|
||||
`translate3d(0,${this.getDistance()}px, 0)`)
|
||||
|
||||
this.moveX = 0
|
||||
this.next = false
|
||||
this.startTime = null
|
||||
this.needCheck = true
|
||||
this.$emit('update:index', this.lIndex)
|
||||
bus.emit(this.name + '-end', this.lIndex)
|
||||
},
|
||||
getDistance() {
|
||||
|
||||
@ -15,6 +15,7 @@ import Loading from "../components/Loading";
|
||||
import BaseButton from "../components/BaseButton";
|
||||
import CONST_VAR from "./const_var";
|
||||
import Dom from "./dom";
|
||||
import bus from "./bus";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -118,7 +119,7 @@ export default {
|
||||
let dbClickTimer = null
|
||||
let lastClickTime = null
|
||||
let dbClick = (e) => {
|
||||
console.log('dbClick')
|
||||
// console.log('dbClick')
|
||||
let id = 'a' + Date.now()
|
||||
let elWidth = 80
|
||||
let rotate = randomNum(0, 1)
|
||||
@ -140,7 +141,6 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
let check = (e) => {
|
||||
let checkTime = 400
|
||||
if (isDbClick) {
|
||||
@ -163,7 +163,8 @@ export default {
|
||||
} else {
|
||||
lastClickTime = nowTime;
|
||||
clickTimer = setTimeout(() => {
|
||||
console.log('单击')
|
||||
// console.log('单击')
|
||||
bus.emit('singleClick')
|
||||
}, checkTime);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user