autoplay next episoed

2026-02-03 22:44:47 +08:00 · 2023-09-12 22:03:02 +08:00
parent 04e5848596
commit 8a3eb1e2f6
4 changed files with 88 additions and 18 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -10,7 +10,7 @@
    <meta name="referrer" content="never">
    <meta charset="UTF-8"/>
    <title>(╥﹏╥)</title>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_xtm26gd5aa.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_defpgksecpb.css">
 </head>
 <body>
    <div id="app"></div>
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -18,6 +18,7 @@ a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
+  outline: none;
 }
 a:hover {
  color: #535bf2;
--- a/client/src/views/index/Play.vue
+++ b/client/src/views/index/Play.vue
@@ -2,8 +2,8 @@
  <div class="player_area" v-show="data.loading">
    <div class="player_p">
      <!--preload-->
-
      <video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls
+                    @ended="isAutoPlay"
                    :loop="false"
                    @keydown="handlePlay"
                    :bufferedPercent="30"
@@ -21,12 +21,19 @@
              <Promotion/>
            </el-icon>
            {{ data.detail.descriptor.cName }}</b>
-          <span>{{ data.detail.descriptor.classTag ? data.detail.descriptor.classTag : '未知' }}</span>
-          <span>{{ data.detail.descriptor.year }}</span>
-          <span>{{ data.detail.descriptor.area }}</span>
+          <span>{{
+              data.detail.descriptor.classTag ? data.detail.descriptor.classTag.replaceAll(',', '/') : '未知'
+            }}</span>
+          <span class="hidden-sm-and-down">{{ data.detail.descriptor.year }}</span>
+          <span class="hidden-sm-and-down">{{ data.detail.descriptor.area }}</span>
        </div>
      </div>
-
+      <div class="play_info_right">
+        <a href="javascript:;" :class="`iconfont icon-play1 ${data.autoplay?'p_r_active':''}`"
+           @click="()=>{data.autoplay= !data.autoplay}"></a>
+        <a v-show="hasNext" href="javascript:;" class="iconfont icon-iov-next"
+           @click="playNext"></a>
+      </div>
    </div>
    <!-- 播放选集   -->
    <div class="play-module">
@@ -40,7 +47,8 @@
        </div>
        <div class="play-list">
          <div class="play-list-item" v-show="data.currentTabIndex == i" v-for="(l,i) in data.detail.playList">
-            <a :class="`play-link ${item.link == data.current.link?'play-link-active':''}`" v-for="(item,index) in l" href="javascript:;"
+            <a :class="`play-link ${item.link == data.current.link?'play-link-active':''}`" v-for="(item,index) in l"
+               href="javascript:;"
               @click="playChange({sourceIndex: i, episodeIndex: index, target: this})">{{ item.episode }}</a>
          </div>
        </div>
@@ -55,7 +63,7 @@
 </template>

 <script lang="ts" setup>
-import {onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue";
+import {computed, onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue";
 import {useRouter} from "vue-router";
 import {ApiGet} from "../../utils/request";
 import {ElMessage} from "element-plus";
@@ -66,10 +74,8 @@ import posterImg from '../../assets/image/play.png'
 import {VideoPlayer} from '@videojs-player/vue'
 import 'video.js/dist/video-js.css'

-
-
 // 播放源切换事件
-const changeTab = (index:number)=>{
+const changeTab = (index: number) => {
  data.currentTabIndex = index
 }

@@ -115,15 +121,18 @@ const data = reactive({
  currentPlayFrom: 0,
  currentEpisode: 0,
  relate: [],
-  currentTabIndex:0,
+  currentTabIndex: 0,
 // @videojs-player 播放属性设置
+  autoplay: true,
  options: {
    title: "", //视频名称
    src: "", //视频源
    volume: 0.6, // 音量
    currentTime: 0,
-  }
+  },
 })
+//
+const hasNext = computed(() => data.current.index != data.detail.playList[data.currentPlayFrom].length - 1)

 // 获取路由信息
 const router = useRouter()
@@ -151,8 +160,11 @@ onBeforeMount(() => {
 const playChange = (play: { sourceIndex: number, episodeIndex: number, target: any }) => {
  let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
  data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
+  data.currentEpisode = play.episodeIndex
  data.options.src = currPlay.link
  data.options.title = data.detail.name + "  " + currPlay.episode
+  data.currentPlayFrom = play.sourceIndex
+  data.currentTabIndex = play.sourceIndex
 }

 // player相关事件
@@ -160,7 +172,6 @@ const handlePlay = (e: any) => {
  e.preventDefault()
  switch (e.keyCode) {
    case 32:
-      console.log(e.target.paused)
      if (e.target.paused) {
        e.target.play()
      } else {
@@ -181,6 +192,25 @@ const handlePlay = (e: any) => {
      break
  }
 }
+// 播放结束后是否自动播放下一集
+const isAutoPlay = () => {
+  if (!data.autoplay) {
+    return
+  }
+ playNext()
+}
+// 点击下一集按钮
+const playNext = () => {
+  if (data.current.index == data.detail.playList[data.currentPlayFrom].length - 1) {
+    return
+  }
+  playChange({sourceIndex: data.currentPlayFrom, episodeIndex: data.current.index + 1, target: ''})
+  if (data.autoplay) {
+    setTimeout(() => {
+      document.getElementsByTagName("video")[0].play()
+    }, 1000)
+  }
+}
 // 主动触发快捷键
 const tiggerKeyMap = (keyCode: number) => {
  let player = document.getElementsByTagName("video")[0]
@@ -266,6 +296,8 @@ const handleBtn = (e: any) => {
  width: 100%;
  padding: 15px 5px;
  text-align: left;
+  display: flex;
+  justify-content: space-between;
 }

 .current_play_title {
@@ -284,6 +316,23 @@ const handleBtn = (e: any) => {
  color: orange;
 }

+/*自动播放 & 下一集链接*/
+
+.play_info_right a {
+  margin-left: 10px;
+  padding: 15px 20px;
+  display: inline-block;
+  font-size: 20px;
+  height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+}
+
+.p_r_active {
+  color: #FFBB5C;
+}
+
+

 /* 播放区域*/
 .player_area {
@@ -325,6 +374,11 @@ const handleBtn = (e: any) => {
    background: #888888;
  }

+  .play_info_right a:hover {
+    color: #FFBB5C;
+    background: rgb(0, 0, 0, 0.2);
+  }
+
 }


@@ -364,9 +418,6 @@ const handleBtn = (e: any) => {
  z-index: 50;
 }

-
-
-
 /*推荐列表区域*/
 .correlation {
  width: 100%;
@@ -419,5 +470,23 @@ const handleBtn = (e: any) => {
    font-size: 13px;
  }

+  .play_info_right {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .play_info_right a {
+    margin-left: 5px;
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 20px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 12px;
+  }
+  .play_info_right a:active {
+    color: #FFBB5C;
+    background: rgb(0, 0, 0, 0.2);
+  }
 }
 </style>
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
    //     port: 3600,
    //     proxy: {
    //         "/api": {
-    //             // target: `http://localhost`,
+    //             target: `http://localhost`,
    //             changeOrigin: true, // 允许跨域
    //             rewrite: path => path.replace(/^\/api/,'')
    //         }