优化首页视频播放逻辑
This commit is contained in:
zyronon
parent
3928d583ff
commit
60b71a0006
22
package-lock.json
generated
22
package-lock.json
generated
@ -4793,6 +4793,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"dom7": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
|
||||
"integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
|
||||
"requires": {
|
||||
"ssr-window": "^3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
|
||||
@ -11202,6 +11210,11 @@
|
||||
"tweetnacl": "~0.14.0"
|
||||
}
|
||||
},
|
||||
"ssr-window": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
|
||||
"integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
|
||||
},
|
||||
"ssri": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
|
||||
@ -11459,6 +11472,15 @@
|
||||
"util.promisify": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "6.7.5",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-6.7.5.tgz",
|
||||
"integrity": "sha512-KaTjO93tZyMpxWHaey+T+H/JeePMZV/joZWhZaor76Xk+rPGmjOz1S8mXSyrRkaW0p0LOJYeWGB8d0gYxSSV/Q==",
|
||||
"requires": {
|
||||
"dom7": "^3.0.0",
|
||||
"ssr-window": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"table": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.nlark.com/table/download/table-5.4.6.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"mitt": "^2.1.0",
|
||||
"pinyin": "^2.9.0",
|
||||
"swiper": "^6.7.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.8",
|
||||
"vuex": "^4.0.1"
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
<!--<template>-->
|
||||
<!-- <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>-->
|
||||
<!-- <p> 您的浏览器不支持 video 标签。</p>-->
|
||||
<!-- </video>-->
|
||||
<!--</template>-->
|
||||
<template>
|
||||
<div class="bg-video" v-bind:style="{'height':height+'px'}">
|
||||
<video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<div class="float-container" @click.stop="togglePlayVideo">
|
||||
<div class="float-container" v-if="true" @click.stop="togglePlayVideo">
|
||||
<transition name="pause">
|
||||
<img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
|
||||
>
|
||||
@ -104,6 +109,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import globalMethods from '../utils/global-methods'
|
||||
|
||||
export default {
|
||||
name: "Video",
|
||||
@ -114,6 +120,12 @@ export default {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return -1
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
@ -139,23 +151,23 @@ export default {
|
||||
// console.log('disabled', this.currentVideoId, v)
|
||||
this.isPlaying = !v
|
||||
if (!v) {
|
||||
this.$store.commit('setCurrentVideoId', this.currentVideoId)
|
||||
// this.$store.commit('setCurrentVideoId', this.currentVideoId)
|
||||
setTimeout(() => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
// 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.play()
|
||||
})
|
||||
} else {
|
||||
@ -172,13 +184,10 @@ export default {
|
||||
step: 0,
|
||||
currentTime: 0,
|
||||
pageX: 0,
|
||||
index: 0,
|
||||
height: 0,
|
||||
width: 0,
|
||||
isPlaying: !this.disabled,
|
||||
isCommenting: false,
|
||||
isAttention: false,
|
||||
isSharing: false,
|
||||
line: null,
|
||||
point: null,
|
||||
isMove: false,
|
||||
@ -240,22 +249,14 @@ export default {
|
||||
}
|
||||
this.isPlaying = !video.paused
|
||||
},
|
||||
//展示评论
|
||||
showComment() {
|
||||
return this.test.push(Date.now())
|
||||
this.isCommenting = !this.isCommenting
|
||||
},
|
||||
showShare() {
|
||||
this.isSharing = !this.isSharing
|
||||
},
|
||||
|
||||
loved(e, index) {
|
||||
let temp = this.$clone(this.video)
|
||||
// console.log(e)
|
||||
// let temp = this.$clone(this.video)
|
||||
let temp = globalMethods.$clone(this.video)
|
||||
temp.isLoved = !temp.isLoved
|
||||
this.$emit('update:video', temp)
|
||||
},
|
||||
//返回视频列表
|
||||
backVideoList() {
|
||||
this.wrapperLeft = '0'
|
||||
this.$emit('videoTest', {item: temp, index: this.index})
|
||||
},
|
||||
move(e) {
|
||||
this.isMove = true
|
||||
@ -274,8 +275,7 @@ export default {
|
||||
video.currentTime = this.currentTime
|
||||
video.play()
|
||||
// this.$stopPropagation(e)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -23,7 +23,7 @@ app.provide('mitt', mitt())
|
||||
app.component('BaseHeader', BaseHeader)
|
||||
app.component('SlideList', SlideList)
|
||||
app.component('SlideItem', SlideItem)
|
||||
app.component('Video', Video)
|
||||
app.component('Video1', Video)
|
||||
app.mixin(mixin)
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div id="home-index">
|
||||
<SlideListVirtual direction="column"
|
||||
ref="slideList"
|
||||
ref="ssss"
|
||||
:virtual="true"
|
||||
:list="videos"
|
||||
:render="render"
|
||||
:renderSlide="render"
|
||||
>
|
||||
</SlideListVirtual>
|
||||
<Comment v-model:is-commenting="isCommenting"/>
|
||||
<Share v-model:is-sharing="isSharing" ref="share"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SlideListVirtual from './SlideListVirtual'
|
||||
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
||||
import Video from "../../components/Video.vue";
|
||||
import Video1 from "../../components/Video.vue";
|
||||
import mp40 from "../../assets/video/0.mp4";
|
||||
import mp41 from "../../assets/video/1.mp4";
|
||||
import mp42 from "../../assets/video/2.mp4";
|
||||
@ -25,10 +27,12 @@ import mp47 from "../../assets/video/7.mp4";
|
||||
import mp48 from "../../assets/video/8.mp4";
|
||||
import mp49 from "../../assets/video/9.mp4";
|
||||
import mp410 from "../../assets/video/10.mp4";
|
||||
import Comment from "../../components/Comment";
|
||||
import Share from "../../components/Share";
|
||||
|
||||
export default {
|
||||
name: "HomeIndex",
|
||||
components: {SlideListVirtual, Video},
|
||||
components: {SlideListVirtual, Video1, Comment, Share,},
|
||||
data() {
|
||||
return {
|
||||
videos: [
|
||||
@ -143,15 +147,24 @@ export default {
|
||||
duration: 99
|
||||
},
|
||||
],
|
||||
render: item => {
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
render: (item, index, list) => {
|
||||
console.log(item)
|
||||
let style = {}
|
||||
if (index !== undefined) {
|
||||
// style.top = (index - 1) * 812 + 'px'
|
||||
}
|
||||
return (
|
||||
`
|
||||
<div class="base-slide-item">
|
||||
<video src="${item.videoUrl}" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
</div>
|
||||
`
|
||||
<div className="base-slide-item" data-index={index} style={style}>
|
||||
<Video1 disabled={false}
|
||||
video={item}
|
||||
index={index}
|
||||
onShowShare={this.t}
|
||||
onVideoTest={this.t}
|
||||
v-model={[this.videos[index], 'video']}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -160,6 +173,16 @@ export default {
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
methods: {
|
||||
t(e) {
|
||||
this.$refs.ssss.update(e.index)
|
||||
// console.log(this.videos)
|
||||
// this.isSharing = !this.isSharing
|
||||
// console.log(111)
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,59 +1,11 @@
|
||||
<template>
|
||||
<div id="base-slide-wrapper" ref="slideWrapper">
|
||||
<div class="indicator-home" v-if="showIndicator && indicatorType === 'home'">
|
||||
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
|
||||
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
|
||||
<div class="left">直播</div>
|
||||
<div class="tab-ctn">
|
||||
<div class="tabs" ref="tabs">
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 0?'active':''"
|
||||
@click="changeIndex(false,0)">
|
||||
<span>关注</span></div>
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 1?'active':''"
|
||||
@click="changeIndex(false,1)"><span>推荐</span></div>
|
||||
</div>
|
||||
<div class="indicator" ref="indicator"></div>
|
||||
</div>
|
||||
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
|
||||
</div>
|
||||
<div class="loading" :style="loadingStyle">AA</div>
|
||||
</div>
|
||||
<div class="indicator-me" :class="indicatorFixed?'fixed':''" v-if="showIndicator && indicatorType === 'me'">
|
||||
<div class="tabs" ref="tabs">
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 0?'active':''"
|
||||
@click="changeIndex(false,0)">
|
||||
<span>作品</span></div>
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 1?'active':''"
|
||||
@click.stop="changeIndex(false,1)">
|
||||
<span>私密</span>
|
||||
</div>
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 2?'active':''"
|
||||
@click="changeIndex(false,2,$event)">
|
||||
<span>喜欢</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator" ref="indicator"></div>
|
||||
</div>
|
||||
<div id="base-slide-list" ref="slideList"
|
||||
:style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
|
||||
@touchstart="touchStart($event)"
|
||||
@touchmove="touchMove($event)"
|
||||
@touchend="touchEnd($event)">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as Vue from 'vue'
|
||||
|
||||
export default {
|
||||
name: "BaseSlideList",
|
||||
props: {
|
||||
render: {
|
||||
renderSlide: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
return null
|
||||
@ -102,40 +54,6 @@ export default {
|
||||
default: () => 0
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
toolbarStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
return {
|
||||
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
loadingStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
}
|
||||
}
|
||||
if (this.homeLoadingMoveYDistance !== 0) {
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
@ -173,21 +91,56 @@ export default {
|
||||
watch: {
|
||||
activeIndex() {
|
||||
// console.log('activeIndex')
|
||||
this.changeIndex()
|
||||
// this.changeIndex()
|
||||
},
|
||||
},
|
||||
render() {
|
||||
console.log('render')
|
||||
// this.$console(this.list.slice(0, 2))
|
||||
return (
|
||||
<div id="base-slide-wrapper">
|
||||
<div id="base-slide-list"
|
||||
ref="slideList"
|
||||
style={{flexDirection: 'column'}}
|
||||
ontouchstart={this.touchStart}
|
||||
ontouchmove={this.touchMove}
|
||||
ontouchend={this.touchEnd}
|
||||
>
|
||||
{
|
||||
// this.list.slice(0, 2).map((item, index) => this.renderSlide(item, index))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
if (this.virtual && this.render) {
|
||||
this.list.slice(0, 2).map(v => {
|
||||
this.slideList.innerHTML += this.render(v)
|
||||
})
|
||||
}
|
||||
await this.checkChildren(true)
|
||||
this.showIndicator && this.initTabs()
|
||||
this.changeIndex(true)
|
||||
this.list.slice(0, 2).map((item, index) => {
|
||||
this.slideList.appendChild(this.getInsEl(item, index))
|
||||
})
|
||||
// await this.checkChildren(true)
|
||||
// this.showIndicator && this.initTabs()
|
||||
// this.changeIndex(true)
|
||||
},
|
||||
methods: {
|
||||
update(index) {
|
||||
let newEl = this.getInsEl(this.list[index], index)
|
||||
$(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
|
||||
},
|
||||
getInsEl(v, index) {
|
||||
let slideVNode = this.renderSlide(v, index)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
}
|
||||
})
|
||||
const parent = document.createElement('div')
|
||||
const ins = app.mount(parent)
|
||||
return ins.$el
|
||||
},
|
||||
t() {
|
||||
alert(11)
|
||||
},
|
||||
changeIndex(init = false, index = null, e) {
|
||||
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
@ -311,30 +264,31 @@ export default {
|
||||
} else {
|
||||
this.currentSlideItemIndex -= 1
|
||||
}
|
||||
console.log(this.slideItems)
|
||||
// console.log(this.slideItems)
|
||||
let that = this
|
||||
if (this.virtual) {
|
||||
if (this.slideItems.length > 2) {
|
||||
if (this.isDrawDown) {
|
||||
$("#base-slide-list div:first").remove()
|
||||
$("#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.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
let s = $(this.getInsEl(item, this.currentSlideItemIndex + 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
this.slideList.appendChild(s[0])
|
||||
} else {
|
||||
$("#base-slide-list div:last").remove()
|
||||
$("#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.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
let s = $(this.getInsEl(item, this.currentSlideItemIndex - 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||
$('#base-slide-list').prepend(s)
|
||||
}
|
||||
} else {
|
||||
let item = this.list[this.currentSlideItemIndex + 1]
|
||||
this.slideList.appendChild($(this.render(item))[0])
|
||||
console.log('this.list[this.currentSlideItemIndex + 1]', item)
|
||||
this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 1))
|
||||
}
|
||||
this.checkChildren()
|
||||
}
|
||||
@ -527,5 +481,4 @@ export default {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user