bug fix

README.md

@@ -39,9 +39,9 @@
 
 >新增内容:
 >
->- 新增新版本线上测试地址: [点击访问](http://1.94.30.26:3600/index)
+>- 新增PC端播放链接测试页, 可通过右下角工具栏进入: [播放测试](http://1.94.30.26:3600/custom/player)
->- 新增首页轮播组件, (宽度是否满屏待定)
+>- 修复手机端轮播图滑动切换后无法自动播放的问题
->- 更新部分按钮连接跳转异常问题
+>- 轮播图海报改用第三方图床进行存储
 
 ## 目录结构
 

client/src/components/index/Util.vue

@@ -1,75 +1,79 @@
 <template>
-    <div class="util">
+  <div class="util">
-        <el-collapse-transition>
+    <el-collapse-transition>
-            <div v-show="control.show">
+      <div v-show="control.show">
-                <a href="javascript:;" @click="changeStyle('top')">
+        <a href="javascript:;" @click="changeStyle('top')">
-                    <el-icon>
+          <el-icon>
-                        <ArrowUp />
+            <ArrowUp/>
-                    </el-icon>
+          </el-icon>
-                </a>
-                <a v-if="control.darkTheme" href="javascript:;" @click="changeStyle('light')">
-                    <el-icon>
-                        <Sunny/>
-                    </el-icon>
-                </a>
-                <a v-if="!control.darkTheme" href="javascript:;" @click="changeStyle('dark')">
-                    <el-icon>
-                        <Moon/>
-                    </el-icon>
-                </a>
-            </div>
-        </el-collapse-transition>
-        <a href="javascript:;" @click="changeStyle('more')" class="more">
-            <el-icon>
-                <MoreFilled/>
-            </el-icon>
         </a>
-      <!--<CustomDialog />-->
+        <a v-if="control.darkTheme" href="javascript:;" @click="changeStyle('light')">
-    </div>
+          <el-icon>
+            <Sunny/>
+          </el-icon>
+        </a>
+        <a v-if="!control.darkTheme" href="javascript:;" @click="changeStyle('dark')">
+          <el-icon>
+            <Moon/>
+          </el-icon>
+        </a>
+        <a href="/custom/player" @click="changeStyle('dark')">
+          <el-icon>
+            <VideoCamera />
+          </el-icon>
+        </a>
+      </div>
+    </el-collapse-transition>
+    <a href="javascript:;" @click="changeStyle('more')" class="more">
+      <el-icon>
+        <MoreFilled/>
+      </el-icon>
+    </a>
+    <!--<CustomDialog />-->
+  </div>
 </template>
 
 <script setup lang="ts">
-import {ArrowUp,Sunny, Moon, MoreFilled} from '@element-plus/icons-vue'
+import {ArrowUp, Sunny, Moon, MoreFilled, VideoCamera} from '@element-plus/icons-vue'
-import { onMounted, reactive} from "vue";
+import {onMounted, reactive} from "vue";
 import CustomDialog from "../Popup/CustomDialog.vue";
 
 const control = reactive({
-    show: false,
+  show: false,
-    darkTheme: true,
+  darkTheme: true,
 
 })
 
-onMounted(()=>{
+onMounted(() => {
-
+  changeStyle(localStorage.getItem("theme") + '')
-    changeStyle(localStorage.getItem("theme")+'')
 })
-const changeStyle = (type:string)=>{
+const changeStyle = (type: string) => {
   switch (type) {
-      case 'top':
+    case 'top':
-          let top = document.documentElement.scrollTop
+      let top = document.documentElement.scrollTop
-          if (top > 0) {
+      if (top > 0) {
-              // 创建定时器，平滑滚动
+        // 创建定时器，平滑滚动
-              const interval = setInterval(() => {
+        const interval = setInterval(() => {
-                  document.documentElement.scrollTop -= 10;
+          document.documentElement.scrollTop -= 10;
-                  if (document.documentElement.scrollTop === 0) {
+          if (document.documentElement.scrollTop === 0) {
-                      clearInterval(interval);
+            clearInterval(interval);
-                  }
-              }, 5);
           }
-          break
+        }, 5);
-      case 'light':
+      }
-          control.darkTheme = false
+      break
-          localStorage.setItem("theme", 'light')
+    case 'light':
-          document.getElementsByClassName('main')[0].style.background = `linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149))`
+      control.darkTheme = false
-          break
+      localStorage.setItem("theme", 'light')
-      case  'dark':
+      document.getElementsByClassName('main')[0].style.background = `linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149))`
-          control.darkTheme = true
+      break
-          localStorage.setItem("theme", 'dark')
+    case  'dark':
-          document.getElementsByClassName('main')[0].style.background = `#16161a`
+      control.darkTheme = true
-          break
+      localStorage.setItem("theme", 'dark')
-      case 'more':
+      document.getElementsByClassName('main')[0].style.background = `#16161a`
-          control.show = !control.show
+      break
-          break
+    case 'more':
+      control.show = !control.show
+      break
   }
 }
 </script>
@@ -77,30 +81,34 @@ const changeStyle = (type:string)=>{
 <style scoped>
 /*窗口工具栏设置*/
 .util {
-    position: fixed;
+  position: fixed;
-    right: 10px;
+  right: 10px;
-    bottom: 15%;
+  bottom: 15%;
-    width: 35px;
+  width: 35px;
-    z-index: 20;
+  z-index: 20;
 }
+
 .util a {
-    display: block;
+  display: block;
-    width: 100%;
+  width: 100%;
-    margin-bottom: 3px;
+  margin-bottom: 3px;
-    height: 35px;
+  height: 35px;
-    border-radius: 50%;
+  border-radius: 50%;
-    background: rgba(0,0,0,0.35);
+  background: rgba(0, 0, 0, 0.35);
 }
-.util a:hover{
+
-    background: #d329a4;
+.util a:hover {
+  background: #d329a4;
 }
+
 :deep(.el-icon) {
-    font-size: 18px;
+  font-size: 18px;
-    height: 100%;
+  height: 100%;
-    color: #ffffff;
+  color: #ffffff;
 }
+
 .more {
-    background: rgb(238, 150, 0) !important;
+  background: rgb(238, 150, 0) !important;
 }
 
 </style>

client/src/router/router.ts

@@ -24,6 +24,7 @@ import FilmClass from "../views/manage/film/FilmClass.vue";
 import Film from "../views/manage/film/Film.vue";
 import FileUpload from "../views/manage/file/FileUpload.vue";
 import FilmAdd from "../views/manage/film/FilmAdd.vue";
+import CustomPlay from "../views/index/CustomPlay.vue";
 
 
 // 2. 定义一个路由
@@ -39,6 +40,7 @@ const routes = [
             {path: 'search', component: SearchFilm},
             {path: 'filmClassify', component: FilmClassify},
             {path: 'filmClassifySearch', component: FilmClassifySearch},
+            {path: '/custom/player', component: CustomPlay},
         ]
     },
     {path: '/login', component: Login},

client/src/style.css

@@ -16,17 +16,20 @@
   /*公共颜色*/
   --bg-light: #ffffff;
 
+  --text-color-primary: #ffffff;
   --content-text-color: #888888;
 
   --paging-parmary-color: #9b49e7d6;
+  --paging-parmary-color-hover: #a574b7;
 
   --border-gray-color: #0000001f;
 
-  --btn-primary-color: #9b49e7;
+  --btn-primary-color: #8636cc;
   --btn-pink-color: #d942bf;
   --btn-bg-linght: #fff;
 
   --bg-fill-light: #8d00fb1a;
+
 }
 
 

client/src/views/index/CustomPlay.vue

@@ -0,0 +1,219 @@
+<template>
+  <!--自定义播放测试页面-->
+  <div class="container">
+    <!--头部工具栏-->
+    <div class="player_header">
+      <!--<el-input class="player_link" placeholder="请输入视频播放地址, mp4 或 m3u8 格式">
+        <template #append>
+          <el-button :icon="Search"/>
+        </template>
+      </el-input>-->
+      <div class="player_link">
+        <input type="text" v-model="data.link" @keyup.enter="play" placeholder="请输入视频播放地址, mp4 或 m3u8 格式" class="cus-input">
+        <button class="iconfont icon-play" @click="play" />
+      </div>
+    </div>
+    <!--播放器区域-->
+    <div class="player_area">
+      <video-player @mounted="playerMount" :src="data.options.src" :poster="posterImg" controls
+                    :loop="false"
+                    @keydown="handlePlay"
+                    :bufferedPercent="30"
+                    :volume="data.options.volume"
+                    crossorigin="anonymous" playsinline class="video-player"
+                    :playback-rates="[0.5, 1.0, 1.5, 2.0]"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {Search} from "@element-plus/icons-vue";
+import posterImg from "../../assets/image/play.png";
+import {VideoPlayer} from "@videojs-player/vue";
+import {reactive} from "vue";
+import {ElMessage} from "element-plus";
+
+const data = reactive({
+  link: '',
+  options: {
+    title: "", //视频名称
+    src: "", //视频源
+    volume: 0.6, // 音量
+    currentTime: 50,
+  },
+})
+
+// 播放器按钮功能处理
+const handlePlay = (e: any) => {
+  e.preventDefault()
+  switch (e.keyCode) {
+    case 32:
+      if (e.target.paused) {
+        e.target.play()
+      } else {
+        e.target.pause()
+      }
+      break
+    case 37:
+      e.target.currentTime = e.target.currentTime - 5 < 0 ? 0 : e.target.currentTime - 5
+      break
+    case 39:
+      e.target.currentTime = e.target.currentTime + 5 > e.target.duration ? e.target.duration : e.target.currentTime + 5
+      break
+    case 38:
+      data.options.volume = data.options.volume + 0.05 > 1 ? 1 : data.options.volume + 0.05
+      break
+    case 40:
+      data.options.volume = data.options.volume - 0.05 < 0 ? 0 : data.options.volume - 0.05
+      break
+  }
+}
+// 主动触发快捷键
+const triggerKeyMap = (keyCode: number) => {
+  let player = document.getElementsByTagName("video")[0]
+  player.focus()
+  const event = document.createEvent('HTMLEvents');
+  event.initEvent('keydown', true, false);
+  event.keyCode = keyCode; // 设置键码
+  player.dispatchEvent(event)
+}
+const handleBtn = (e: any) => {
+  let btns = document.getElementsByClassName('vjs-button')
+  for (let el of btns) {
+    el.addEventListener('keydown', function (t: any) {
+      t.preventDefault()
+      triggerKeyMap(t.keyCode)
+    })
+  }
+}
+// player 加载完成事件
+const playerMount = (e:any) =>{
+  // 处理功能按钮相关事件
+  handleBtn(e)
+}
+
+// 播放执行
+const play = () => {
+  const pattern = /(^http[s]?:\/\/[^\s]+\.m3u8$)|(^http[s]?:\/\/[^\s]+\.mp4$)/
+  if (!pattern.test(data.link)) {
+    ElMessage.error({message: '视频链接格式异常, 请输入正确的播放链接!!!'})
+    return
+  }
+  // 同步 link 为 player src
+  data.options.src = data.link
+  // 执行播放器播放
+  document.getElementsByTagName("video")[0].play()
+}
+
+</script>
+
+<style scoped>
+:deep(.el-main) {
+  padding-bottom: 0!important;
+}
+.container {
+  margin: 0 auto;
+  height: 80%
+}
+
+.player_header {
+  margin: 40px auto;
+}
+
+.player_link {
+  width: 80%;
+  height: 45px;
+  margin: 0 auto;
+  display: flex;
+}
+.cus-input {
+  font-size: 16px;
+  width: 100%;
+  padding: 0  40px;
+  border: none;
+  outline-style: none;
+  border-radius: 16px 0 0 16px;
+  min-height: 40px;
+  background: rgba(255,255,255,0.8);
+}
+.cus-input:focus{
+  border: 0;
+}
+
+.icon-play {
+  height: 100%;
+  font-size: 16px;
+  border-radius: 0 16px 16px 0;
+  background: deeppink;
+  color: rgba(255,255,255,0.8);
+  outline-style: none;
+}
+.icon-play:hover {
+  background: hotpink;
+}
+
+/*播放器样式.*/
+.player_area {
+  width: 100%;
+  /*height: 700px;*/
+  margin: 0;
+  padding-bottom: 56.25% !important;
+  position: relative;
+  border-radius: 6px;
+  display: flex;
+}
+
+.video-player {
+  width: 80% !important;
+  height: 80% !important;
+  left: 10%;
+  position: absolute;
+  border-radius: 6px;
+}
+
+:deep(.vjs-big-play-button) {
+  line-height: 2em;
+  height: 2em;
+  width: 2em;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.65);
+}
+
+:deep(.vjs-control-bar) {
+  background: rgba(0, 0, 0, 0.32);
+}
+
+/*取消video被选中的白边*/
+:deep(video:focus) {
+  border: none !important;
+  outline: none;
+}
+
+:deep(.data-vjs-player:focus) {
+  border: none !important;
+  outline: none;
+}
+
+:deep(.vjs-tech) {
+  border-radius: 6px;
+}
+
+:deep(img) {
+  border-radius: 6px;
+}
+
+/*进度条配色*/
+:deep(.video-js .vjs-load-progress div) {
+  background: rgba(255, 255, 255, 0.55) !important;
+}
+
+:deep(.video-js .vjs-play-progress) {
+  background: #44c8cf;
+}
+
+:deep(.video-js .vjs-slider) {
+  background-color: hsla(0, 0%, 100%, .2);
+}
+
+</style>

client/src/views/index/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="hidden-sm-and-up banner_wrap" @touchstart="touchS" @touchend="touchE" >
-      <el-carousel  v-model="data.banner.current" ref="wrap"  :interval="5000" trigger="hover" height="200px" arrow="never" >
+      <el-carousel  v-model="data.banner.current" ref="wrap" :pause-on-hover="false"   :interval="5000" trigger="hover" height="200px" arrow="never" >
         <el-carousel-item v-for="item in banners" :key="item"  >
           <el-image style="width: 100%; height: 100%;" :src="item.picture" fit="fill"/>
           <p class="carousel-title">{{ item.name }}</p>
@@ -69,10 +69,7 @@ import {onBeforeMount, reactive, ref} from "vue";
 import {ApiGet} from "../../utils/request";
 import FilmList from "../../components/index/FilmList.vue";
 import {ElMessage} from "element-plus";
-import Banner01 from '../../assets/image/banner/banner01.jpg'
+
-import Banner02 from '../../assets/image/banner/banner02.jpg'
-import Banner03 from '../../assets/image/banner/banner03.jpg'
-import Banner04 from '../../assets/image/banner/banner04.jpeg'
 
 
 // 轮播数据拟态
@@ -82,32 +79,28 @@ let banners = [
     year: 2012,
     cName: '动漫',
     poster: 'https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg',
-    picture: Banner01,
+    picture: 'https://s2.loli.net/2024/02/21/Wt1QDhabdEI7HcL.jpg'
-    // picture: 'https://s2.loli.net/2024/02/21/Wt1QDhabdEI7HcL.jpg'
   },
   {
     name: '从零开始的异世界生活',
     year: 2016,
     cName: '动漫',
     poster: 'https://img.bfzypic.com/upload/vod/20230424-29/82e3aec3f43103fa1b7e5a0e7f7c3806.jpg',
-    picture: Banner02,
+    picture: 'https://s2.loli.net/2024/02/21/UkpdhIRO12fsy6C.jpg'
-    // picture: 'https://s2.loli.net/2024/02/21/UkpdhIRO12fsy6C.jpg'
   },
   {
     name: '五等分的新娘',
     year: 2020,
     cName: '动漫',
     poster: 'https://img.bfzypic.com/upload/vod/20230424-38/dfff403cfd9a5b7d6eed8b4f1b3dedb1.jpg',
-    picture: Banner03
+    picture: 'https://s2.loli.net/2024/02/21/wXJr59Zuv4tcKNp.jpg'
-    // picture: 'https://s2.loli.net/2024/02/21/wXJr59Zuv4tcKNp.jpg'
   },
   {
     name: '我的青春恋爱物语果然有问题',
     year: 2018,
     cName: '动漫',
     poster: 'https://img.bfzypic.com/upload/vod/20230424-37/e5c9ec121c2cba230243c333447e818a.jpg',
-    picture: Banner04,
+    picture: 'https://s2.loli.net/2024/02/21/oMAGzSliK2YbhRu.jpg'
-    // picture: 'https://s2.loli.net/2024/02/21/oMAGzSliK2YbhRu.jpg'
   },
 ]
 
@@ -127,15 +120,16 @@ const touchS = (e:any)=>{
 const touchE = (e:any)=>{
   data.banner.touch.end = e.changedTouches[0].pageX
   let distance = data.banner.touch.end - data.banner.touch.star
-  console.log(distance)
   if (distance >= 50) {
-    let index = data.banner.touch.index - 1
+    // let index = data.banner.touch.index - 1
-    data.banner.touch.index = index >= 0 ? index : banners.length-1
+    // data.banner.touch.index = index >= 0 ? index : banners.length-1
+    wrap.value?.prev()
   } else if (distance <= -50) {
-    let index = data.banner.touch.index + 1
+    // let index = data.banner.touch.index + 1
-    data.banner.touch.index = index <= banners.length - 1 ? index : 0
+    // data.banner.touch.index = index <= banners.length - 1 ? index : 0
+    wrap.value?.next()
   }
-  wrap.value?.setActiveItem(data.banner.touch.index)
+  // wrap.value?.setActiveItem(data.banner.touch.index)
 }
 
 const data = reactive({

client/src/views/index/Play.vue

@@ -213,7 +213,7 @@ const playNext = () => {
   }
 }
 // 主动触发快捷键
-const tiggerKeyMap = (keyCode: number) => {
+const triggerKeyMap = (keyCode: number) => {
   let player = document.getElementsByTagName("video")[0]
   player.focus()
   const event = document.createEvent('HTMLEvents');
@@ -226,7 +226,7 @@ const handleBtn = (e: any) => {
   for (let el of btns) {
     el.addEventListener('keydown', function (t: any) {
       t.preventDefault()
-      tiggerKeyMap(t.keyCode)
+      triggerKeyMap(t.keyCode)
     })
   }
 }

client/vite.config.ts

@@ -13,7 +13,6 @@ export default defineConfig({
         proxy: {
             "/api": {
                 target: `http://127.0.0.1:3601`,
-                // target: `http://1.94.30.26:3601`,
                 changeOrigin: true, // 允许跨域
                 rewrite: path => path.replace(/^\/api/, '')
             }