From f66d95fc25765208dcb37a89f1a3351102772b59 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 5 Nov 2021 01:03:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=B7=BB=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/data/resource.js     | 36 +++++++-------
 src/components/Loading.vue      |  1 +
 src/components/Video.vue        | 40 ++++++++++++++-
 src/pages/message/chat/Chat.vue |  2 +-
 src/pages/test/Test.vue         |  7 ++-
 src/pages/test/TestVideo.vue    | 88 +++++++++++++++++++++++++++++++++
 6 files changed, 152 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/test/TestVideo.vue

diff --git a/src/assets/data/resource.js b/src/assets/data/resource.js
index 884eb4a..eb51650 100644
--- a/src/assets/data/resource.js
+++ b/src/assets/data/resource.js
@@ -15016,7 +15016,7 @@ export default {
     {
       name: '龙卷风',
       "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
-      cover: new URL('../../../assets/img/music-cover/1.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/1.png', import.meta.url).href,
       author: '周杰伦',
       duration: 99,
       use_count: 37441000,
@@ -15026,7 +15026,7 @@ export default {
     {
       name: '爱在西元前',
       mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
-      cover: new URL('../../../assets/img/music-cover/2.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/2.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15036,7 +15036,7 @@ export default {
     {
       name: '蜗牛',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-      cover: new URL('../../../assets/img/music-cover/3.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/3.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15046,7 +15046,7 @@ export default {
     {
       name: '半岛铁盒',
       mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
-      cover: new URL('../../../assets/img/music-cover/4.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/4.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15056,7 +15056,7 @@ export default {
     {
       name: '轨迹',
       mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
-      cover: new URL('../../../assets/img/music-cover/5.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/5.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15066,7 +15066,7 @@ export default {
     {
       name: '七里香',
       mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
-      cover: new URL('../../../assets/img/music-cover/6.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/6.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15076,7 +15076,7 @@ export default {
     {
       name: '发如雪',
       mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-      cover: new URL('../../../assets/img/music-cover/7.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15086,7 +15086,7 @@ export default {
     {
       name: '霍元甲',
       mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
-      cover: new URL('../../../assets/img/music-cover/8.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/8.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15096,7 +15096,7 @@ export default {
     {
       name: '千里之外(周杰伦/费玉清)',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-      cover: new URL('../../../assets/img/music-cover/9.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/9.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15106,7 +15106,7 @@ export default {
     {
       name: '菊花台',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-      cover: new URL('../../../assets/img/music-cover/10.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/10.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15116,7 +15116,7 @@ export default {
     {
       name: '不能说的秘密',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-      cover: new URL('../../../assets/img/music-cover/11.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/11.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15126,7 +15126,7 @@ export default {
     {
       name: '牛仔很忙',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-      cover: new URL('../../../assets/img/music-cover/12.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/12.png', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15136,7 +15136,7 @@ export default {
     {
       name: '给我一首歌的时间',
       mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
-      cover: new URL('../../../assets/img/music-cover/13.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15146,7 +15146,7 @@ export default {
     {
       name: '烟花易冷',
       mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
-      cover: new URL('../../../assets/img/music-cover/14.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15156,7 +15156,7 @@ export default {
     {
       name: '惊叹号',
       mp3: 'https://m3.8js.net:99/20111103/150.mp3',
-      cover: new URL('../../../assets/img/music-cover/15.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15166,7 +15166,7 @@ export default {
     {
       name: '明明就',
       mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
-      cover: new URL('../../../assets/img/music-cover/16.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15176,7 +15176,7 @@ export default {
     {
       name: '算什么男人',
       mp3: 'https://m3.8js.net:99/20150107/429.mp3',
-      cover: new URL('../../../assets/img/music-cover/17.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -15186,7 +15186,7 @@ export default {
     {
       name: '告白气球',
       mp3: 'https://m3.8js.net:99/20161016/481.mp3',
-      cover: new URL('../../../assets/img/music-cover/18.jpg', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 995535a..b4a3315 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -31,6 +31,7 @@ export default {
 
 
   &.full {
+    z-index: 999;
     position: fixed;
     left: 50%;
     top: 50%;
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 387e657..17d1d64 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="video-wrapper" ref="videoWrapper" :class="name">
+    <Loading v-if="loading" style="position: absolute"/>
     <video :src="video.video + '?v=123'"
            :poster="video.video + videoPoster"
            ref="video"
@@ -119,12 +120,14 @@ import BaseMarquee from "./BaseMarquee";
 import Dom from "../utils/dom";
 import BaseMusic from "./BaseMusic";
 import {mapState} from "vuex";
+import Loading from "./Loading";
 
 export default {
   name: "Video",
   components: {
     BaseMarquee,
-    BaseMusic
+    BaseMusic,
+    Loading
   },
   props: {
     video: {
@@ -167,6 +170,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       name: `v-${this.index}-video`,
       globalMethods: globalMethods,
       duration: 0,
@@ -209,6 +213,40 @@ export default {
       }
     })
 
+    let eventTester = (e, t) => {
+      video.addEventListener(e, () => {
+        if (e === 'playing') this.loading = false
+        if (e === 'progress') this.loading = true
+        if (e === 'waiting') this.loading = true
+        console.log((new Date()).getTime(), e, t)
+      }, false);
+    }
+
+
+    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
+    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    // eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
+    // eventTester("suspend", '延迟下载'); //延迟下载
+    eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
+    eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
+    eventTester("stalled", '网速失速'); //网速失速
+    eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
+    eventTester("pause", 'pause()触发'); //pause()触发
+    eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
+    eventTester("loadeddata"); //
+    eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
+    eventTester("playing", '开始回放'); //开始回放
+    eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
+    eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
+    eventTester("seeking", '寻找中'); //寻找中
+    eventTester("seeked", '寻找完毕'); //寻找完毕
+    // eventTester("timeupdate",'播放时间改变'); //播放时间改变
+    eventTester("ended", '播放结束'); //播放结束
+    eventTester("ratechange", '播放速率改变'); //播放速率改变
+    eventTester("durationchange", '资源长度改变'); //资源长度改变
+    eventTester("volumechange", '音量改变'); //音量改变
+
     let videoWrapper = new Dom(this.$refs.videoWrapper)
     videoWrapper.on('play', this.play)
     videoWrapper.on('stop', this.stop)
diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue
index 51e577f..acc1a83 100644
--- a/src/pages/message/chat/Chat.vue
+++ b/src/pages/message/chat/Chat.vue
@@ -215,7 +215,7 @@ export default {
   },
   data() {
     return {
-      previewImg: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+      previewImg: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
       videoCall: [],
       MESSAGE_TYPE,
       messages: [
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index e76654c..d094a3a 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="Test">
-    <Uploader/>
+<!--    <Uploader/>-->
+    <TestVideo class="vue"/>
   </div>
 </template>
 <script>
@@ -8,11 +9,13 @@
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import Search from "../../components/Search";
 import Uploader from "../me/Uploader";
+import TestVideo from "./TestVideo";
 
 export default {
   name: "Test",
   components: {
-    Uploader
+    Uploader,
+    TestVideo
   },
   props: {},
   data() {
diff --git a/src/pages/test/TestVideo.vue b/src/pages/test/TestVideo.vue
new file mode 100644
index 0000000..f7c81e4
--- /dev/null
+++ b/src/pages/test/TestVideo.vue
@@ -0,0 +1,88 @@
+<template>
+  <div id="TestVideo">
+    <video :src="url" ref="video" controls autoplay muted></video>
+    <Loading v-if="loading"/>
+  </div>
+</template>
+<script>
+export default {
+  name: "TestVideo",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      loading: false,
+      url: 'http://ttentau.top/13.mp4?v=' + Date.now()
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+    let video = this.$refs.video
+    // video.addEventListener('progress', () => {
+    //   console.log('加载中')
+    // })
+    // console.log(video)
+
+    let eventTester = (e, t) => {
+      video.addEventListener(e, () => {
+        if (e === 'playing') this.loading = false
+        if (e === 'progress') this.loading = true
+        if (e === 'waiting') this.loading = true
+        console.log((new Date()).getTime(), e, t)
+      }, false);
+    }
+
+
+    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
+    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    // eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
+    // eventTester("suspend", '延迟下载'); //延迟下载
+    eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
+    eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
+    eventTester("stalled", '网速失速'); //网速失速
+    eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
+    eventTester("pause", 'pause()触发'); //pause()触发
+    eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
+    eventTester("loadeddata"); //
+    eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
+    eventTester("playing", '开始回放'); //开始回放
+    eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
+    eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
+    eventTester("seeking", '寻找中'); //寻找中
+    eventTester("seeked", '寻找完毕'); //寻找完毕
+    // eventTester("timeupdate",'播放时间改变'); //播放时间改变
+    eventTester("ended", '播放结束'); //播放结束
+    eventTester("ratechange", '播放速率改变'); //播放速率改变
+    eventTester("durationchange", '资源长度改变'); //资源长度改变
+    eventTester("volumechange", '音量改变'); //音量改变
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#TestVideo {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  video {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>