bug

zhjq-ui/package.json

@@ -57,6 +57,7 @@
     "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,6 +7,9 @@
       <p>发布人：{{ form.author }}</p>
       <p>发布时间：{{ form.releaseTime }}</p>
     </div>
+    <div v-show="showDiv">
+      <video ref="videoPlayer" class="video-js"></video>
+    </div>
     <div class="attraction-details">
       <div class="rich-content" v-html="richContent"></div>
     </div>
@@ -15,6 +18,8 @@
 <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",
@@ -28,21 +33,73 @@ export default {
       sound: null,
       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"
     };
   },
-
+  props: {
+    videoSrc: {
+      type: String
+    }
+  },
   mounted() {
-    // this.id = this.$route.params.id;
     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();
@@ -60,9 +117,12 @@ export default {
       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)
       });
+
       setTimeout(() => {
-        this.playSound(this.form.voiceUrl)
+        // this.playSound(this.form.voiceUrl)
       }, 1000);
     }
   }

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

@@ -67,7 +67,7 @@
       <el-table-column label="二维码" align="center" prop="qrCodeUrl">
         <template slot-scope="scope">
           <el-popover placement="right" trigger="hover">
-            <image-preview :src="scope.row.qrCodeUrl" style="width:200px;height:200px;"/>
+            <image-preview :src="scope.row.qrCodeUrl" style="width:300px;height:300px;"/>
             <image-preview slot="reference" :src="scope.row.qrCodeUrl" style="max-width: 50px;max-height: 100px"/>
           </el-popover>
         </template>