视频播放

src/components/VideoHistory.vue

@@ -23,6 +23,7 @@
                     type="primary"
                     size="mini"
                     round
+                    v-if="laNum > 0"
                 >
                     {{ 15 * curPage + 1 + '-' + (15 * curPage + laNum) }}
                 </van-button>

src/components/VideoPlayer.vue

@@ -0,0 +1,147 @@
+<template>
+    <div class="video-player">
+        <video
+            ref="videoRef"
+            muted
+            playsinline="true"
+            webkit-playsinline="true"
+            class="video"
+            :src="playUrl"
+            :poster="poster"
+        ></video>
+        <div class="video-box" :class="{ pause: !isPlaying }" @click="changePlay">
+            <van-icon class="play-img" v-if="!isPlaying" size="80" color="#fff" name="play-circle" />
+            <van-slider v-model="currentVal" @change="onChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'
+import { accDiv } from '../plugins/calc'
+const props = defineProps({
+    playUrl: {
+        type: String,
+        default: ''
+    },
+    poster: {
+        type: String,
+        default: ''
+    },
+    curEpInfo: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+const emit = defineEmits(['videoEnded'])
+
+const videoRef = ref(null)
+const currentVal = ref(0)
+const canChange = ref(true)
+onMounted(() => {
+    nextTick(() => {
+        videoRef.value.addEventListener('ended', () => {
+            emit('videoEnded')
+            console.log('播放结束')
+        })
+        videoRef.value.addEventListener('timeupdate', e => {
+            if (videoRef.value && videoRef.value.duration && canChange.value) {
+                currentVal.value = Number(
+                    (accDiv(videoRef.value.currentTime, videoRef.value.duration) * 100).toFixed(2)
+                )
+            }
+        })
+        videoRef.value.addEventListener('play', () => {
+            isPlaying.value = true
+        })
+        videoRef.value.addEventListener('pause', () => {
+            isPlaying.value = false
+        })
+    })
+})
+
+function getCurrent() {
+    return videoRef.value.currentTime
+}
+
+function play() {
+    videoRef.value.play()
+}
+
+function pause() {
+    videoRef.value.pause()
+}
+
+function setCurrent(currentTime) {
+    videoRef.value.currentTime = currentTime
+    nextTick(() => {
+        canChange.value = true
+    })
+}
+
+function changeMuted() {
+    videoRef.value.muted = false
+}
+
+function onChange(value) {
+    canChange.value = false
+    setCurrent((videoRef.value.duration * value) / 100)
+    play()
+}
+
+const isPlaying = ref(false)
+function changePlay() {
+    if (isPlaying.value) {
+        pause()
+    } else {
+        play()
+    }
+}
+
+defineExpose({ getCurrent, play, pause, setCurrent, changeMuted })
+
+
+</script>
+
+<style lang="less" scoped>
+.video {
+    width: 100%;
+    height: calc(100vh - 95px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+}
+
+.video-player {
+    position: relative;
+
+    .video-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 20;
+        transition: all ease-in-out 0.3s;
+        &.pause {
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+    }
+}
+
+.van-slider {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0px;
+    --van-slider-button-width: 18px;
+    --van-slider-button-height: 18px;
+}
+
+.play-img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+</style>

src/plugins/calc.js

@@ -47,4 +47,4 @@ function accDiv(arg1, arg2) {
     return accMul(r1 / r2, Math.pow(10, t2 - t1))
 }
 
-export { accAdd, accMul, accDiv }
+export { accAdd, accMul, accDiv }

src/views/VideoPage.vue

@@ -5,20 +5,29 @@
                 <ion-buttons slot="start">
                     <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                 </ion-buttons>
-                <ion-title>{{ `第${curEpInfo.episodeNum}集` }}</ion-title>
+                <ion-title v-if="curEpInfo && curEpInfo.episodeNum">{{ `第${curEpInfo.episodeNum}集` }}</ion-title>
             </ion-toolbar>
         </ion-header>
         <ion-content class="view van-safe-area-bottom">
-            <video
+            <!-- <div class="video-content">
+                <video
+                    ref="videoRef"
+                    :controls="false"
+                    muted
+                    playsinline="true"
+                    webkit-playsinline="true"
+                    class="video"
+                    :src="curEpInfo.playUrl"
+                    :poster="poster"
+                ></video>
+                <div class="video-box"></div>
+            </div> -->
+            <video-player
                 ref="videoRef"
-                controls
-                muted
-                playsinline="true"
-                webkit-playsinline="true"
-                class="video"
-                :src="curEpInfo.playUrl"
+                :playUrl="curEpInfo.playUrl"
                 :poster="poster"
-            ></video>
+                @videoEnded="videoEnded"
+            ></video-player>
 
             <div class="right-fixed">
                 <div class="right-btn" @click="collect">
@@ -78,6 +87,7 @@ import { showNotify } from 'vant'
 import resolveUrl from 'resolve-url'
 import { nextTick } from 'vue'
 import toast from '@/utils/toast'
+import VideoPlayer from '@/components/VideoPlayer.vue'
 
 const poster = ref('')
 
@@ -144,8 +154,9 @@ async function play(curEpId = 0, duration = 0) {
         } else {
             curEpInfo.value = res
             nextTick(() => {
-                videoRef.value.currentTime = duration
+                videoRef.value.setCurrent(duration)
                 videoRef.value.play()
+                videoRef.value.changeMuted()
             })
         }
 
@@ -202,7 +213,7 @@ function showVideoHistory() {
 
 const videoRef = ref(null)
 onBeforeRouteLeave((to, from, next) => {
-    saveHistories(videoRef.value.currentTime).finally(() => {
+    saveHistories(videoRef.value.getCurrent()).finally(() => {
         next()
     })
 })
@@ -219,16 +230,11 @@ async function saveHistories(time) {
     )
 }
 
-onMounted(() => {
-    nextTick(() => {
-        videoRef.value.addEventListener('ended', () => {
-            console.log('播放结束')
-            getEpisodes(curEpInfo.value.episodeNum + 1).then(() => {
-                saveHistories(videoRef.value.currentTime)
-            })
-        })
+function videoEnded() {
+    getEpisodes(curEpInfo.value.episodeNum + 1).then(() => {
+        saveHistories(videoRef.value.getCurrent())
     })
-})
+}
 
 function playVideo(num) {
     getEpisodes(num, 0)
@@ -283,9 +289,4 @@ function playVideo(num) {
         }
     }
 }
-
-.video {
-    width: 100%;
-    height: calc(100vh - 95px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
-}
 </style>