|
|
@@ -1,10 +1,12 @@
|
|
|
-import { defineComponent, nextTick, onMounted, reactive, toRefs, watch } from 'vue'
|
|
|
+import { defineComponent, nextTick, onMounted, reactive, render, toRefs, watch } from 'vue'
|
|
|
import 'plyr/dist/plyr.css'
|
|
|
import Plyr from 'plyr'
|
|
|
import styles from './index.module.less'
|
|
|
-import iconSpeed from '../../image/video-speed1.png'
|
|
|
+import iconSpeed from '../../image/video-speed.png'
|
|
|
|
|
|
import { iconVideoBg, iconLoop, iconLoopActive, iconPlay, iconPause } from '../../image/icons.json'
|
|
|
+import { Popup, Slider } from 'vant'
|
|
|
+import { useElementBounding } from '@vueuse/core'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'video-play',
|
|
|
@@ -29,6 +31,9 @@ export default defineComponent({
|
|
|
animationState: 'start' as 'start' | 'end',
|
|
|
videoItem: null as unknown as Plyr,
|
|
|
speedControl: false,
|
|
|
+ speedStyle: {
|
|
|
+ left: '1px'
|
|
|
+ },
|
|
|
defaultSpeed: 1 // 默认速度
|
|
|
})
|
|
|
const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100)
|
|
|
@@ -39,6 +44,7 @@ export default defineComponent({
|
|
|
|
|
|
const togglePlay = (e: Event) => {
|
|
|
e.stopPropagation()
|
|
|
+ data.speedControl = false
|
|
|
if (!data.videoContianerRef.paused) {
|
|
|
data.videoItem?.pause()
|
|
|
} else {
|
|
|
@@ -46,6 +52,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
const toggleLoop = () => {
|
|
|
+ data.speedControl = false
|
|
|
const loopBtn = document.getElementById(loopBtnId)
|
|
|
if (!loopBtn || !data.videoItem) return
|
|
|
const isLoop = data.videoItem.loop
|
|
|
@@ -59,40 +66,21 @@ export default defineComponent({
|
|
|
const onDefault = () => {
|
|
|
document.getElementById(controlID)?.addEventListener('click', (e: Event) => {
|
|
|
e.stopPropagation()
|
|
|
+ data.speedControl = false
|
|
|
if (data.videoContianerRef.paused) return
|
|
|
emit('close')
|
|
|
})
|
|
|
document.getElementById(controlID)?.addEventListener('touchmove', () => {
|
|
|
+ data.speedControl = false
|
|
|
if (data.videoContianerRef.paused) return
|
|
|
emit('close')
|
|
|
})
|
|
|
document.getElementById(playBtnId)?.addEventListener('click', togglePlay)
|
|
|
document.getElementById(loopBtnId)?.addEventListener('click', toggleLoop)
|
|
|
|
|
|
- document.getElementById(speedBtnId)?.addEventListener('click', () => {
|
|
|
+ document.getElementById(speedBtnId)?.addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation()
|
|
|
data.speedControl = !data.speedControl
|
|
|
- // const element = document.getElementById(speedPopoverId)
|
|
|
- // if (data.speedControl) {
|
|
|
- // element?.classList.add(styles.active)
|
|
|
- // } else {
|
|
|
- // element?.classList.remove(styles.active)
|
|
|
- // }
|
|
|
- toggleSpeedControl(data.speedControl)
|
|
|
- })
|
|
|
-
|
|
|
- const nodeList = document.querySelectorAll('#' + speedPopoverId + ' .videoPlaySpeedItem')
|
|
|
- nodeList.forEach((item) => {
|
|
|
- item?.addEventListener('click', (e) => {
|
|
|
- nodeList.forEach((child) => {
|
|
|
- child?.classList.remove('active')
|
|
|
- })
|
|
|
- const target: any = e?.target
|
|
|
- item?.classList.add('active')
|
|
|
- data.videoItem.speed = target?.dataset.value * 1
|
|
|
- data.defaultSpeed = target?.dataset.value * 1
|
|
|
- // 设置完速度之后关闭弹窗
|
|
|
- toggleSpeedControl(false)
|
|
|
- })
|
|
|
})
|
|
|
|
|
|
setName()
|
|
|
@@ -143,28 +131,6 @@ export default defineComponent({
|
|
|
<button id="${speedBtnId}" class="${styles.actionBtn} ${styles.speedBtn}">
|
|
|
<img class="loop" src="${iconSpeed}" />
|
|
|
</button>
|
|
|
- <div class="${styles.popoverGroup}" id="${speedPopoverId}">
|
|
|
- <div class="videoPlaySpeedItem active" data-value="1">
|
|
|
- <i class="point" data-value="1"></i>
|
|
|
- <span data-value="1">1倍</span>
|
|
|
- </div>
|
|
|
- <div class="videoPlaySpeedItem" data-value="1.25">
|
|
|
- <i class="point" data-value="1.25"></i>
|
|
|
- <span data-value="1.25">1.25倍</span>
|
|
|
- </div>
|
|
|
- <div class="videoPlaySpeedItem" data-value="1.5">
|
|
|
- <i class="point" data-value="1.5"></i>
|
|
|
- <span data-value="1.5">1.5倍</span>
|
|
|
- </div>
|
|
|
- <div class="videoPlaySpeedItem" data-value="1.75">
|
|
|
- <i class="point" data-value="1.75"></i>
|
|
|
- <span data-value="1.75">1.75倍</span>
|
|
|
- </div>
|
|
|
- <div class="videoPlaySpeedItem" data-value="2">
|
|
|
- <i class="point" data-value="2"></i>
|
|
|
- <span data-value="2">2倍</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="videoItemName"></div>
|
|
|
@@ -186,22 +152,11 @@ export default defineComponent({
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- const toggleSpeedControl = (isShow: boolean) => {
|
|
|
- const element = document.getElementById(speedPopoverId)
|
|
|
- if (isShow) {
|
|
|
- element?.classList.add(styles.active)
|
|
|
- data.speedControl = true
|
|
|
- } else {
|
|
|
- element?.classList.remove(styles.active)
|
|
|
- data.speedControl = false
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
const toggleHideControl = (isShow: boolean) => {
|
|
|
data.videoItem?.toggleControls(isShow)
|
|
|
|
|
|
if (!isShow) {
|
|
|
- toggleSpeedControl(isShow)
|
|
|
+ data.speedControl = isShow
|
|
|
}
|
|
|
}
|
|
|
watch(
|
|
|
@@ -219,7 +174,7 @@ export default defineComponent({
|
|
|
if (data.videoItem) data.videoItem.speed = data.defaultSpeed || 1
|
|
|
|
|
|
// 切换的时候隐藏
|
|
|
- toggleSpeedControl(false)
|
|
|
+ data.speedControl = false
|
|
|
}
|
|
|
)
|
|
|
let videoTimer = null as any
|
|
|
@@ -305,6 +260,68 @@ export default defineComponent({
|
|
|
}}
|
|
|
onError={handleErrorVideo}
|
|
|
></video>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ display: data.speedControl ? 'block' : 'none'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class={styles.sliderPopup}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class={styles.iconAdd}
|
|
|
+ onClick={() => {
|
|
|
+ if (data.defaultSpeed >= 1.5) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.videoItem) {
|
|
|
+ data.defaultSpeed = (data.defaultSpeed * 10 + 1) / 10
|
|
|
+ data.videoItem.speed = data.defaultSpeed
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ></i>
|
|
|
+ <Slider
|
|
|
+ min={0.5}
|
|
|
+ max={1.5}
|
|
|
+ step={0.1}
|
|
|
+ v-model={data.defaultSpeed}
|
|
|
+ vertical
|
|
|
+ barHeight={5}
|
|
|
+ reverse
|
|
|
+ onChange={() => {
|
|
|
+ if (data.videoItem) {
|
|
|
+ data.videoItem.speed = data.defaultSpeed
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ button: () => (
|
|
|
+ <div class={styles.sliderPoint}>
|
|
|
+ {data.defaultSpeed}
|
|
|
+ <span>x</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Slider>
|
|
|
+ <i
|
|
|
+ class={[styles.iconCut]}
|
|
|
+ onClick={() => {
|
|
|
+ if (data.defaultSpeed <= 0.5) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (data.videoItem) {
|
|
|
+ data.defaultSpeed = (data.defaultSpeed * 10 - 1) / 10
|
|
|
+ data.videoItem.speed = data.defaultSpeed
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
