diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index 0983c6a..12a5bf0 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -53,8 +53,8 @@
@touchend="touchend"
>
- {{ $duration(currentTime) }}
- / {{ $duration(duration) }}
+ {{ LUtils.$duration(currentTime) }}
+ / {{ LUtils.$duration(duration) }}
@@ -158,7 +158,7 @@ export default {
height: 0,
width: 0,
isMove: false,
- isSingleClick: false,
+ ignoreWaiting: false,//忽略waiting事件。因为改变进度会触发waiting事件，烦的一批
test: [1, 2],
localItem: this.item,
progressBarRect: {},
@@ -166,6 +166,7 @@ export default {
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
commentVisible: false,
isMarginTop: false,
+ LUtils: Utils
}
},
mounted() {
@@ -188,9 +189,10 @@ export default {
let eventTester = (e, t) => {
video.addEventListener(e, () => {
+ // console.log('eventTester', e, this.item.id)
if (e === 'playing') this.loading = false
if (e === 'waiting') {
- if (!this.paused && !this.isSingleClick) {
+ if (!this.paused && !this.ignoreWaiting) {
this.loading = true
}
}
@@ -283,26 +285,31 @@ export default {
this.commentVisible = false
}
},
- click(val) {
- if (this.item.id === val) {
- if (this.status === SlideItemPlayStatus.Play) {
+ click({id, type}) {
+ if (this.item.id === id) {
+ if (type === EVENT_KEY.ITEM_TOGGLE) {
+ if (this.status === SlideItemPlayStatus.Play) {
+ this.pause()
+ } else {
+ this.play()
+ }
+ }
+ if (type === EVENT_KEY.ITEM_STOP) {
+ this.$refs.video.currentTime = 0
+ this.ignoreWaiting = true
this.pause()
- } else {
+ setTimeout(() => this.ignoreWaiting = false, 300)
+ }
+ if (type === EVENT_KEY.ITEM_PLAY) {
+ this.$refs.video.currentTime = 0
+ this.ignoreWaiting = true
this.play()
- //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
- // this.isSingleClick = true
- setTimeout(() => {
- // this.isSingleClick = false
- }, 300)
+ setTimeout(() => this.ignoreWaiting = false, 300)
}
- this.loading = false
}
},
play() {
this.status = SlideItemPlayStatus.Play
- if (this.currentTime !== -1) {
- this.$refs.video.currentTime = this.currentTime
- }
this.$refs.video.volume = 1
this.$refs.video.play()
},
@@ -310,9 +317,6 @@ export default {
this.status = SlideItemPlayStatus.Pause
this.$refs.video.pause()
},
- formatNumber(v) {
- return Utils.formatNumber(v)
- },
touchstart(e) {
Utils.$stopPropagation(e)
this.start.x = e.touches[0].pageX
@@ -335,6 +339,7 @@ export default {
Utils.$stopPropagation(e)
if (this.isPlaying) return
setTimeout(() => this.isMove = false, 1000)
+ this.$refs.video.currentTime = this.currentTime
this.play()
}
}
diff --git a/src/pages/slideHooks/VInfinite.vue b/src/pages/slideHooks/VInfinite.vue
index 480f028..0bea03d 100644
--- a/src/pages/slideHooks/VInfinite.vue
+++ b/src/pages/slideHooks/VInfinite.vue
@@ -4,7 +4,7 @@ import GM from '../../utils'
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
import {SlideType} from "../../utils/const_var";
import SlideItem from './SlideItem'
-import bus from "../../utils/bus";
+import bus, {EVENT_KEY} from "../../utils/bus";
import {useStore} from 'vuex'
import Utils from "../../utils";
import Dom from "@/utils/dom";
@@ -91,12 +91,19 @@ watch(
}
)
watch(
- ()=>props.index,
- ()=>{
- // 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)
+ () => props.index,
+ (newVal, oldVal) => {
+ // console.log('watch-index', newVal, oldVal, props.list[newVal].id)
+ bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
+ id: props.list[newVal].id,
+ type: EVENT_KEY.ITEM_PLAY
+ })
+ setTimeout(() => {
+ bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
+ id: props.list[oldVal].id,
+ type: EVENT_KEY.ITEM_STOP
+ })
+ }, 200)
}
)
diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue
index bcb24bb..7d0c69b 100644
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@@ -335,12 +335,12 @@ function end() {
onMounted(() => {
getData()
- bus.on('singleClick', () => {
+ bus.on(EVENT_KEY.SINGLE_CLICK, () => {
let id = ''
if (state.navIndex === 4) {
id = state.recommendVideos[state.itemIndex].id
}
- bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, id)
+ bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {id, type: EVENT_KEY.ITEM_TOGGLE})
})
bus.on('update:item', val => {
const {baseIndex, navIndex, itemIndex} = val.position
diff --git a/src/utils/bus.js b/src/utils/bus.js
index f215a9e..519d326 100644
--- a/src/utils/bus.js
+++ b/src/utils/bus.js
@@ -42,6 +42,7 @@ export default {
}
export const EVENT_KEY = {
+ SINGLE_CLICK: 'SINGLE_CLICK',
SINGLE_CLICK_BROADCAST: 'SINGLE_CLICK_BROADCAST',
ENTER_FULLSCREEN: 'ENTER_FULLSCREEN',
EXIT_FULLSCREEN: 'EXIT_FULLSCREEN',
@@ -53,4 +54,7 @@ export const EVENT_KEY = {
DIALOG_END: 'DIALOG_END',
OPEN_SUB_TYPE: 'OPEN_SUB_TYPE',
CLOSE_SUB_TYPE: 'CLOSE_SUB_TYPE',
+ ITEM_TOGGLE: 'ITEM_TOGGLE',
+ ITEM_PLAY: 'ITEM_PLAY',
+ ITEM_STOP: 'ITEM_STOP',
}
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index ed5a1ad..9f51263 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -15,7 +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";
+import bus, {EVENT_KEY} from "./bus";
import {random} from "lodash";
export default {
@@ -152,7 +152,7 @@ export default {
} else {
clickTimer = setTimeout(() => {
console.log('单击')
- bus.emit('singleClick')
+ bus.emit(EVENT_KEY.SINGLE_CLICK)
}, checkTime);
}
lastClickTime = nowTime;