bug

zhjq-ui/package.json

@@ -57,7 +57,6 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
-    "video.js": "^8.21.0",
     "vue": "2.6.12",
     "vue-aliplayer": "^1.0.0",
     "vue-count-to": "1.0.13",

zhjq-ui/src/views/system/voice/details/details.vue

@@ -7,8 +7,9 @@
       <p>发布人：{{ form.author }}</p>
       <p>发布时间：{{ form.releaseTime }}</p>
     </div>
-    <div v-show="showDiv">
-      <video ref="videoPlayer" class="video-js"></video>
+    <div style="display: flex; align-items: center;">
+<!--      <p style="margin-right: 10px;">语音介绍:</p>-->
+      <video class="videoStyle" id="video_1" :src="form.voiceUrl" autobuffer controls></video>
     </div>
     <div class="attraction-details">
       <div class="rich-content" v-html="richContent"></div>
@@ -18,8 +19,6 @@
 <script>
 import {getAppInfo} from "@/api/system/voice";
 import {Howl} from 'howler';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
 
 export default {
   name: "Details",
@@ -34,96 +33,42 @@ export default {
       richContent: "",
       serverUrl: null,
       showDiv:false,
-      options: {
-        autoplay: true,
-        controls: true,
-        source: []
-      },
-      _dom: "",
-      videoImg: './components/assets/playbtn.png',
-      playStatus: true,
-      isMute: true,
-      isPlay: false,
-      autoplay: "true"
+      videoSrc: ''
     };
   },
-  props: {
-    videoSrc: {
-      type: String
-    }
-  },
+
   mounted() {
     this.id = this.$route.query.id;
-    const videoEl = this.$refs.videoPlayer
-    this.player = videojs(videoEl, this.options, function onPlayerReady() {
-      console.log("播放器已经准备好")
-    })
-    getAppInfo(this.$route.query.id).then(response => {
-      this.form = response.data;
-      this.richContent = this.form.content
-      console.log("", this.form.voiceUrl)
-      this.player.src({
-        autoplay: true, // 自动播放
-        controls: false,//是否显示底部控制栏：true/false
-        muted: false, // 静音播放
-        loop: true,//是否循环播放:true/false
-        preload: 'auto', // 预加载
-        type: "audio/mp3",
-        src: this.form.voiceUrl
-      })
-    });
-    // this.player.src({
-    //   type: "audio/mp3",
-    //   src: "http://music.163.com/song/media/outer/url?id=447925558.mp3"
-    // })
-  },
-  beforeDestroy() {
-    if (this.player) {
-      this.player.dispose();
-    }
   },
   created() {
-    // this.getDetails()
+    this.getDetails()
     this.getConfigKey("server_url").then(response => {
       this.serverUrl = response.msg;
-      console.log(this.serverUrl);
     });
-    setTimeout(() => {
-      this.changeclick()
-    }, 3000);
   },
   methods: {
-    changeclick(){
-      console.log("2222222222222")
-      setTimeout(() => {
-          this.player.play()
-        },1000);
-      console.log("3333333333333333")
-    },
-    playSound(val) {
-      if (this.sound) {
-        this.sound.play();
-      } else {
-        this.sound = new Howl({
-          src: [val],
-          html5: true,
-          format: ['mp3']
-        });
-        this.sound.play();
-      }
-    },
+    // playSound(val) {
+    //   if (this.sound) {
+    //     this.sound.play();
+    //   } else {
+    //     this.sound = new Howl({
+    //       src: [val],
+    //       html5: true,
+    //       format: ['mp3']
+    //     });
+    //     this.sound.play();
+    //   }
+    // },
     getDetails() {
       let that = this
       getAppInfo(that.$route.query.id).then(response => {
         this.form = response.data;
         this.richContent = this.form.content
-        this.videoSrc = this.form.voiceUrl
-        console.log("",this.videoSrc)
+        this.videoSrc = this.form.voiceUrl;
       });
-
-      setTimeout(() => {
+      // setTimeout(() => {
         // this.playSound(this.form.voiceUrl)
-      }, 1000);
+      // }, 1000);
     }
   }
 };
@@ -142,6 +87,7 @@ video {
   width: 100%;
   height: auto; /* 固定高度 */
 }
+
 </style>
 <style scoped>
 .attraction-page {
@@ -179,6 +125,10 @@ p {
   overflow: auto; /* 允许内容溢出时滚动 */
 }
 
+.videoStyle {
+  width: 100%;
+  height: 70px; /* 固定高度 */
+}
 /* 响应式样式 */
 @media (max-width: 600px) {
   .rich-content {