添加 flv 播放器

package-lock.json

@@ -1409,21 +1409,21 @@
                           },
                           "dependencies": {
                             "vue": {
-                              "version": "3.3.1",
-                              "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.1.tgz",
-                              "integrity": "sha512-3Rwy4I5idbPVSDZu6I+fFh6tdDSZbauImCTqLxE7y0LpHtiDvPeY01OI7RkFPbva1nk4hoO0sv/NzosH2h60sg==",
+                              "version": "3.3.4",
+                              "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
+                              "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
                               "requires": {
-                                "@vue/compiler-dom": "3.3.1",
-                                "@vue/compiler-sfc": "3.3.1",
-                                "@vue/runtime-dom": "3.3.1",
-                                "@vue/server-renderer": "3.3.1",
-                                "@vue/shared": "3.3.1"
+                                "@vue/compiler-dom": "3.3.4",
+                                "@vue/compiler-sfc": "3.3.4",
+                                "@vue/runtime-dom": "3.3.4",
+                                "@vue/server-renderer": "3.3.4",
+                                "@vue/shared": "3.3.4"
                               }
                             },
                             "vue-router": {
-                              "version": "4.2.0",
-                              "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.0.tgz",
-                              "integrity": "sha512-c+usESa6ZoWsm4PPdzRSyenp5A4dsUtnDJnrI03fY1IpIihA9TK3x5ffgkFDpjhLJZewsXoKURapNLFdZjuqTg==",
+                              "version": "4.2.2",
+                              "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.2.tgz",
+                              "integrity": "sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==",
                               "requires": {
                                 "@vue/devtools-api": "^6.5.0"
                               }
@@ -1462,55 +1462,104 @@
                 }
               }
             },
+            "@vue/compiler-core": {
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
+              "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+              "requires": {
+                "@babel/parser": "^7.21.3",
+                "@vue/shared": "3.3.4",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.0.2"
+              }
+            },
             "@vue/compiler-dom": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.1.tgz",
-              "integrity": "sha512-VmgIsoLivCft3+oNc5KM7b9wd0nZxP/g2qilMwi1hJyGA624KWnNKHn4hzBQs4FpzydUVpNy+TWVT8KiRCh3MQ==",
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
+              "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
               "requires": {
-                "@vue/compiler-core": "3.3.1",
-                "@vue/shared": "3.3.1"
+                "@vue/compiler-core": "3.3.4",
+                "@vue/shared": "3.3.4"
               }
             },
             "@vue/compiler-sfc": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.1.tgz",
-              "integrity": "sha512-G+FPwBbXSLaA4+Ry5/bdD9Oda+sRslQcE9o6JSZaougRiT4OjVL0vtkbQHPrGRTULZV28OcrAjRfSZOSB0OTXQ==",
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
+              "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
               "requires": {
                 "@babel/parser": "^7.20.15",
-                "@vue/compiler-core": "3.3.1",
-                "@vue/compiler-dom": "3.3.1",
-                "@vue/compiler-ssr": "3.3.1",
-                "@vue/reactivity-transform": "3.3.1",
-                "@vue/shared": "3.3.1",
+                "@vue/compiler-core": "3.3.4",
+                "@vue/compiler-dom": "3.3.4",
+                "@vue/compiler-ssr": "3.3.4",
+                "@vue/reactivity-transform": "3.3.4",
+                "@vue/shared": "3.3.4",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.0",
                 "postcss": "^8.1.10",
                 "source-map-js": "^1.0.2"
               }
             },
+            "@vue/compiler-ssr": {
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
+              "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+              "requires": {
+                "@vue/compiler-dom": "3.3.4",
+                "@vue/shared": "3.3.4"
+              }
+            },
+            "@vue/reactivity": {
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
+              "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+              "requires": {
+                "@vue/shared": "3.3.4"
+              }
+            },
+            "@vue/reactivity-transform": {
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
+              "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+              "requires": {
+                "@babel/parser": "^7.20.15",
+                "@vue/compiler-core": "3.3.4",
+                "@vue/shared": "3.3.4",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.0"
+              }
+            },
+            "@vue/runtime-core": {
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
+              "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+              "requires": {
+                "@vue/reactivity": "3.3.4",
+                "@vue/shared": "3.3.4"
+              }
+            },
             "@vue/runtime-dom": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.1.tgz",
-              "integrity": "sha512-NBjYbQPtMklb7lsJsM2Juv5Ygry6mvZP7PdH1GZqrzfLkvlplQT3qCtQMd/sib6yiy8t9m/Y4hVU7X9nzb9Oeg==",
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
+              "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
               "requires": {
-                "@vue/runtime-core": "3.3.1",
-                "@vue/shared": "3.3.1",
+                "@vue/runtime-core": "3.3.4",
+                "@vue/shared": "3.3.4",
                 "csstype": "^3.1.1"
               }
             },
             "@vue/server-renderer": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.1.tgz",
-              "integrity": "sha512-sod8ggOwbkQXw3lBjfzrbdxRS9lw/lNHoMaXghHawNYowf+4WoaLWD5ouz6fPZadUqNKAsqK95p8DYb1vcVfPA==",
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
+              "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
               "requires": {
-                "@vue/compiler-ssr": "3.3.1",
-                "@vue/shared": "3.3.1"
+                "@vue/compiler-ssr": "3.3.4",
+                "@vue/shared": "3.3.4"
               }
             },
             "@vue/shared": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.1.tgz",
-              "integrity": "sha512-ybDBtQ+479HL/bkeIOIAwgpeAEACzztkvulJLbK3JMFuTOv4qDivmV3AIsR8RHYJ+RD9tQxcHWBsX4GqEcYrfw=="
+              "version": "3.3.4",
+              "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
+              "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
             }
           }
         },
@@ -13518,11 +13567,6 @@
       "resolved": "http://r.cnpmjs.org/videojs-font/download/videojs-font-2.1.0.tgz",
       "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
     },
-    "videojs-hotkeys": {
-      "version": "0.2.25",
-      "resolved": "http://r.cnpmjs.org/videojs-hotkeys/download/videojs-hotkeys-0.2.25.tgz",
-      "integrity": "sha1-s0tYFtsa90fkGpCjviaNUUSbTLA="
-    },
     "videojs-ie8": {
       "version": "1.1.2",
       "resolved": "http://r.cnpmjs.org/videojs-ie8/download/videojs-ie8-1.1.2.tgz",
@@ -13691,18 +13735,6 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
-    "vue-video-player": {
-      "version": "5.0.2",
-      "resolved": "http://r.cnpmjs.org/vue-video-player/download/vue-video-player-5.0.2.tgz",
-      "integrity": "sha1-NKQiOf8wTvx2mNogpBZQUddmweY=",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "video.js": "^6.6.0",
-        "videojs-contrib-hls": "^5.12.2",
-        "videojs-flash": "^2.1.0",
-        "videojs-hotkeys": "^0.2.20"
-      }
-    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -17,7 +17,6 @@
     "vue": "^2.6.11",
     "vue-cookies": "^1.7.0",
     "vue-router": "^3.4.5",
-    "vue-video-player": "^5.0.2",
     "flv.js": "^1.6.2",
     "hls.js": "^1.1.2",
     "shaka-player": "^3.2.1",

src/api/video.js

@@ -10,8 +10,8 @@ const videoApi = {
   videoUrlApi: '/api/content/video/url',
   videoSubmitApi: '/api/content/video/submit',
   userVideoListApi: '/api/content/video/user',
+  videoCommentApi: '/api/comment/video',
 
-  videoTimelineApi: '/api/media/video/post/timeline',
   playerRecordApi: '/api/media/video/play/record',
   userRecentlyVideoListApi: '/api/media/video/post/user/recently',
   testVideoApi: '/api/media/video/post/display'
@@ -75,7 +75,7 @@ export function getDisplayedVideoList() {
   return get(videoApi.testVideoApi)
 }
 
-// 视频时间线
-export function videoTimeline(page) {
-  return get(videoApi.videoTimelineApi + '/' + page)
+// 视频评论
+export function getVideoComment(videoId) {
+  return get(videoApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
 }

src/components/VideoPlayer.vue

@@ -7,13 +7,11 @@
 import { videoUrl } from '@/api/video'
 import SocketInstance from '@/utils/ws/socket-instance'
 
-const DPlayer = require('dplayer')
-const flv = require('flv.js')
-const hls = require('hls.js')
-const dashjs = require('dashjs')
+import flvjs from 'flv.js'
+import DPlayer from 'dplayer'
 
 export default {
-  name: 'Play',
+  name: 'VideoPlayer',
   props: {
     videoProp: {
       type: Object,
@@ -22,9 +20,7 @@ export default {
   },
   data() {
     return {
-      hls,
-      dashjs,
-      flv,
+      flvjs,
       DPlayer,
       userPermission: {
         userId: -1,
@@ -65,7 +61,7 @@ export default {
     }*/
   },
   mounted() {
-    SocketInstance.connect()
+    //SocketInstance.connect()
     const videoId = this.videoProp.videoId
     if (this.getUrl) {
       this.getVideoUrl(videoId)
@@ -84,7 +80,9 @@ export default {
               }
               this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime)
             } else if (urlType === 'flv') {
-              // this.initFlvPlayer(videoId, coverUrl, urls)
+              const urls = res.data.urls
+              const url = urls[0].url
+              this.initFlvPlayer(videoId, this.videoProp.coverUrl, url)
             } else {
               this.message = 'url 类型无法识别'
               this.showMessage = true
@@ -104,8 +102,10 @@ export default {
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         logo: '/logo.png',
-        autoplay: true,
         screenshot: false,
+        autoplay: false,
+        volume: 0.1,
+        mutex: true,
         video: {
           pic: coverUrl,
           defaultQuality: 0,
@@ -124,8 +124,12 @@ export default {
         }
       })
 
+      // 设置音量
+      //player.volume(0.1, true, false)
       // 跳转到上次看到的位置
       player.seek(pos)
+
+      /* 事件绑定 */
       player.on('progress', function() {
         SocketInstance.send({ videoId: videoId, currentTime: player.video.currentTime })
       })
@@ -138,59 +142,30 @@ export default {
           this.$router.push('/video/oaywkjbLbW')
         }
       })
+
+      player.on('volumechange', () => {
+        console.log('声音改变')
+        console.log(player.volume)
+      })
     },
     initFlvPlayer(videoId, coverUrl, videoUrl) {
-      new DPlayer({
+      const dp = new DPlayer({
         container: document.getElementById('dplayer'),
         video: {
           url: videoUrl,
-          type: 'flv'
-        },
-        pluginOptions: {
-          flv: {
-            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
-            mediaDataSource: {
-              // mediaDataSource config
-            },
-            config: {
-              // config
+          type: 'customFlv',
+          customType: {
+            customFlv: function(video, player) {
+              const flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                url: video.src
+              })
+              flvPlayer.attachMediaElement(video)
+              flvPlayer.load()
             }
           }
         }
       })
-    },
-    initHlsPlayer(videoId, coverUrl, videoUrl) {
-      new DPlayer({
-        container: document.querySelector('#dplayer'),
-        lang: 'zh-cn',
-        autoplay: false,
-        screenshot: true,
-        video: {
-          pic: coverUrl,
-          url: videoUrl,
-          type: 'hls'
-        },
-        logo: '/logo.png',
-        danmaku: {
-          id: videoId,
-          maximum: 10000,
-          api: '//api.reghao.cn/api/media/danmaku/',
-          token: 'bili',
-          user: this.userPermission.userId,
-          videoId: videoId,
-          bottom: '15%',
-          unlimited: true
-        }
-      })
-    },
-    initDashPlayer(videoId, coverUrl, videoUrl) {
-      new DPlayer({
-        container: document.getElementById('dplayer'),
-        video: {
-          url: videoUrl,
-          type: 'dash'
-        }
-      })
     }
   }
 }

src/components/card/VideoCard.vue

@@ -69,7 +69,7 @@ export default {
       return handleVisited(visited)
     },
     convertTimestamp(value) {
-      const date = new Date(value)
+      const date = new Date(value*1000)
       var month = date.getMonth()
       if (month < 10) {
         if (month === 0) {

src/views/home/Video.vue

@@ -2,7 +2,7 @@
   <div>
     <el-row>
       <el-col :md="12">
-        <div id="category-btn">
+        <div class="category-btn">
           <el-button
             v-for="(item, index) in videoCategory"
             :key="index"
@@ -20,6 +20,22 @@
         <recommend />
       </el-col>
     </el-row>
+    <el-row v-if="false">
+      <el-col :md="12">
+        <div class="category-btn">
+          <el-button
+            v-for="(item, index) in videoCategory"
+            :key="index"
+            type="primary"
+            size="medium"
+            :plain="currentIndex !== index"
+            circle
+            @click="btnClick(item.cid, index)"
+          >{{ item.cname }}
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
     <!--电影列表，与推荐列表-->
     <el-row id="movie-list">
       <!--电影列表-->
@@ -72,7 +88,7 @@ export default {
       pageSize: 12,
       totalPages: 0,
       videoList: [],
-      lastId: 0,
+      lastId: '0',
       currentIndex: 0,
       videoCategory: [
         { cname: '全部', cid: 11010 },
@@ -95,23 +111,26 @@ export default {
     })
 
     const query = this.$route.query
-    var pageNumber = query.pageNumber
-    if (pageNumber !== undefined) {
-      this.currentPage = pageNumber
-    }
-
     var lastId = query.lastId
     if (lastId !== undefined) {
       this.lastId = lastId
     }
 
-    this.$router.push({
-      path: '/video',
-      query: {
-        pageNumber: this.currentPage,
-        lastId: this.lastId
+    var pageNumber = query.pageNumber
+    if (pageNumber !== undefined) {
+      const pn = parseInt(pageNumber)
+      if (pn !== this.currentPage) {
+        this.currentPage = pn
+        this.$router.push({
+          path: '/video',
+          query: {
+            pageNumber: this.currentPage,
+            lastId: this.lastId
+          }
+        });
       }
-    });
+    }
+
     this.videoPageWrapper(this.currentPage, this.lastId)
   },
   mounted() {
@@ -172,7 +191,7 @@ export default {
   padding: 10px;
 }
 
-#category-btn {
+.category-btn {
   padding-left: 14%;
   padding-right: 6%;
   padding-top: 20px;
@@ -189,7 +208,7 @@ el-btn {
     padding-right: 0.5%;
   }
 
-  #category-btn {
+  .category-btn {
     padding-left: 0.5%;
     padding-right: 0.5%;
     padding-top: 3%;

src/views/home/VideoPage.vue

@@ -133,7 +133,7 @@
 </template>
 
 <script>
-import { similarVideo, videoInfo } from '@/api/video'
+import { similarVideo, videoInfo, getVideoComment } from '@/api/video'
 import VideoPlayer from 'components/VideoPlayer'
 import Comment from 'components/comment/Comment'
 import VideoCard from 'components/card/VideoCard'
@@ -197,6 +197,9 @@ export default {
     /* getCollectionNum(this.video.vid).then(res => {
       this.collectionNum = res
     })*/
+    getVideoComment(videoId).then(res => {
+      console.log(res)
+    })
   },
   methods: {
     // 获取视频的详细信息
@@ -247,7 +250,6 @@ export default {
       this.inputVisible = false
       this.inputValue = ''
     },
-
     // 换一换
     updateVideos() {
     },

src/views/user/Profile.vue

@@ -15,7 +15,9 @@
         <el-tabs v-model="activeName" @tab-click='tabClick'>
           <el-tab-pane label="主页" name="home">
             <div v-if="activeName === 'home'">
-              <status-card />
+              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                <video-card :video="video" />
+              </el-col>
             </div>
           </el-tab-pane>
           <el-tab-pane label="状态" name="status">
@@ -23,30 +25,44 @@
               <status-card />
             </div>
           </el-tab-pane>
-          <el-tab-pane label="投稿" name="post">
-            <post-card v-if="activeName === 'post'" />
-          </el-tab-pane>
         </el-tabs>
       </el-col>
+      <el-col :span="24" class="pagination">
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          hide-on-single-page
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalPages"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
 import StatusCard from '@/components/card/StatusCard'
-import PostCard from '@/components/card/PostCard'
+import VideoCard from '@/components/card/VideoCard'
 import { getUserInfo } from "@/api/user";
+import { userVideoList } from "@/api/video";
 
 export default {
   name: 'Profile',
-  components: { StatusCard, PostCard },
+  components: { StatusCard, VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       user: null,
       userId: null,
-      activeName: 'home'
+      activeName: 'home',
+      currentPage: 1,
+      pageSize: 12,
+      totalPages: 0,
+      videoList: []
     }
   },
   created() {
@@ -58,6 +74,15 @@ export default {
         this.user = res.data
       }
     })
+
+    userVideoList(1, this.userId).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.videoList = resData.list
+        this.totalPages = resData.totalPages
+        this.lastId = resData.lastId
+      }
+    })
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -69,16 +94,22 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.$router.push({
+        path: '/video',
+        query: {
+          pageNumber: this.currentPage,
+          lastId: this.lastId
+        }
+      });
+
+      // this.videoPageWrapper(this.currentPage, this.lastId)
       // 回到顶部
       scrollTo(0, 0)
     },
     tabClick(tab) {
       const index = tab.index
-      console.log(index)
       if (index === 0) {
         const path = '/user/' + this.userId + '/status'
         this.$router.push({path: path});