音频和视频播放冲突

src/components/Adult/preview/AudioLine copy.vue

@@ -1,431 +0,0 @@
-<template>
-  <div class="Audio">
-    <div class="audioLine" v-if="!hideSlider">
-      <div
-        class="play"
-        :class="audio.playing ? 'playBtn' : 'pauseBtn'"
-        @click="PlayAudio"
-      />
-      <template v-if="!isRepeat">
-        <el-slider
-          v-model="playValue"
-          :style="{ width: sliderWidth + 'px', height: '2px' }"
-          :format-tooltip="formatProcessToolTip"
-          @change="changeCurrentTime"
-        />
-        <span
-          ><template v-if="audio.playing">-</template
-          >{{
-            audio.maxTime
-              ? realFormatSecond(audio.maxTime - audio.currentTime)
-              : ""
-          }}</span
-        >
-      </template>
-      <audio
-        ref="audio"
-        :src="mp3"
-        @loadedmetadata="onLoadedmetadata"
-        @timeupdate="onTimeupdate"
-      />
-    </div>
-    <div class="audioLine2" v-else>
-      <div
-        class="play-icon"
-        :class="audio.playing ? 'playBtn-icon' : 'pauseBtn-icon'"
-        @click="PlayAudio"
-      />
-    </div>
-    <audio
-      :ref="audioId"
-      :src="mp3"
-      @loadedmetadata="onLoadedmetadata"
-      @timeupdate="onTimeupdate"
-      @canplay="oncanplay"
-      :id="audioId"
-    />
-  </div>
-</template>
-
-<script>
-// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》from ‘《组件路径》';
-export default {
-  // import引入的组件需要注入到对象中才能使用
-  components: {},
-  props: [
-    "mp3",
-    "getCurTime",
-    "stopAudio",
-    "width",
-    "isRepeat",
-    "themeColor",
-    "hideSlider",
-    "ed",
-    "bg",
-    "audioId",
-  ],
-  data() {
-    // 这里存放数据
-    return {
-      playValue: 0,
-      audio: {
-        // 该字段是音频是否处于播放状态的属性
-        playing: false,
-        // 音频当前播放时长
-        currentTime: 0,
-        // 音频最大播放时长
-        maxTime: 0,
-        isPlaying: false,
-        loading: false,
-      },
-      audioAllTime: null, // 展示总时间
-      duioCurrentTime: null, // 剩余时间
-    };
-  },
-  // 计算属性 类似于data概念
-  computed: {
-    sliderWidth() {
-      let width = 0;
-      if (this.width) {
-        width = this.width;
-      } else {
-        width = 662;
-      }
-      return width;
-    },
-  },
-  // 监控data中数据变化
-  watch: {
-    stopAudio: {
-      handler(val, oldVal) {
-        const _this = this;
-        if (val) {
-          _this.$refs[_this.audioId].pause();
-          _this.audio.playing = false;
-        }
-      },
-      // 深度观察监听
-      deep: true,
-    },
-    "audio.playing": {
-      handler(val) {
-        this.$emit("playChange", val);
-        if (val) this.$emit("handleChangeStopAudio");
-      },
-    },
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let _this = this;
-    let audioId = _this.audioId;
-    _this.$refs[audioId].addEventListener("play", function () {
-      _this.audio.playing = true;
-      _this.audio.isPlaying = true;
-    });
-    _this.$refs[audioId].addEventListener("pause", function () {
-      _this.audio.playing = false;
-    });
-    _this.$refs[audioId].addEventListener("ended", function () {
-      _this.audio.playing = false;
-      _this.audio.isPlaying = false;
-    });
-    this.$nextTick(() => {
-      document
-        .getElementsByClassName("el-slider__button-wrapper")[0]
-        .addEventListener("mousedown", function () {
-          _this.$refs[audioId].pause();
-          _this.audio.playing = false;
-        });
-    });
-  },
-  // 生命周期-挂载之前
-  beforeMount() {},
-  // 生命周期-更新之后
-  updated() {},
-  // 如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
-  // 方法集合
-  methods: {
-    PlayAudio() {
-      let audioId = this.audioId;
-      let audio = document.getElementsByTagName("audio");
-      audio.forEach((item) => {
-        if (item.src == this.mp3) {
-          if (item.id !== audioId) {
-            item.pause();
-          }
-        } else {
-          item.pause();
-        }
-      });
-
-      if (this.audio.playing) {
-        this.$refs[audioId].pause();
-        this.audio.playing = false;
-        this.$emit("handleListenRead", false);
-      } else {
-        if (this.hideSlider) {
-          this.$refs[audioId].play();
-          this.onTimeupdateTime(this.bg / 1000);
-        } else {
-          this.$refs[audioId].play();
-        }
-        this.audio.playing = true;
-        this.$emit("handleChangeStopAudio");
-        this.$emit("handleListenRead", true);
-      }
-    },
-    oncanplay() {},
-    // 点击 拖拽播放音频
-    changeCurrentTime(value) {
-      let audioId = this.audioId;
-      this.$refs[audioId].play();
-      this.audio.playing = true;
-      this.$refs[audioId].currentTime = parseInt(
-        (value / 100) * this.audio.maxTime
-      );
-    },
-    mousedown() {
-      let audioId = this.audioId;
-      this.$refs[audioId].pause();
-      this.audio.playing = false;
-    },
-    // 进度条格式化toolTip
-    formatProcessToolTip(index) {
-      index = parseInt((this.audio.maxTime / 100) * index);
-      return this.realFormatSecond(index);
-    },
-    // 音频加载完之后
-    onLoadedmetadata(res) {
-      this.audio.maxTime = parseInt(res.target.duration);
-      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
-    },
-    // 当音频当前时间改变后，进度条也要改变
-    onTimeupdate(res) {
-      let audioId = this.audioId;
-      this.audio.currentTime = res.target.currentTime;
-      this.getCurTime(res.target.currentTime);
-      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
-      if (this.audio.currentTime * 1000 > this.ed) {
-        this.$refs[audioId].pause();
-      }
-    },
-    onTimeupdateTime(res, playFlag) {
-      let audioId = this.audioId;
-      this.$refs[audioId].currentTime = res;
-      this.playValue = (res / this.audio.maxTime) * 100;
-      if (playFlag) {
-        let audio = document.getElementsByTagName("audio");
-        audio.forEach((item) => {
-          if (item.id !== audioId) {
-            item.pause();
-          }
-        });
-        this.$refs[audioId].play();
-      }
-    },
-    // 将整数转换成 时：分：秒的格式
-    realFormatSecond(value) {
-      let theTime = parseInt(value); // 秒
-      let theTime1 = 0; // 分
-      let theTime2 = 0; // 小时
-      if (theTime > 60) {
-        theTime1 = parseInt(theTime / 60);
-        theTime = parseInt(theTime % 60);
-        if (theTime1 > 60) {
-          theTime2 = parseInt(theTime1 / 60);
-          theTime1 = parseInt(theTime1 % 60);
-        }
-      }
-      let result = String(parseInt(theTime));
-      if (result < 10) {
-        result = "0" + result;
-      }
-      if (theTime1 > 0) {
-        result = String(parseInt(theTime1)) + ":" + result;
-        if (theTime1 < 10) {
-          result = "0" + result;
-        }
-      } else {
-        result = "00:" + result;
-      }
-      if (theTime2 > 0) {
-        result = String(parseInt(theTime2)) + ":" + result;
-        if (theTime2 < 10) {
-          result = "0" + result;
-        }
-      } else {
-        // result = "00:" + result;
-      }
-      return result;
-    },
-  },
-  // 生命周期-创建之前
-  beforeCreated() {},
-  // 生命周期-更新之前
-  beforUpdate() {},
-  // 生命周期-销毁之前
-  beforeDestory() {},
-  // 生命周期-销毁完成
-  destoryed() {},
-};
-</script>
-<style lang="scss" scoped>
-/* @import url(); 引入css类 */
-.Audio {
-  width: 100%;
-  .audioLine {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 40px;
-    background: #ffffff;
-    // border: 1px solid rgba(0, 0, 0, 0.1);
-    // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    border-radius: 4px;
-    .play {
-      margin-right: 12px;
-      margin-left: 8px;
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      display: block;
-      // &.playBtn {
-      //   background: url("../../../assets/pause.png") no-repeat left top;
-      //   background-size: 100% 100%;
-      // }
-      // &.pauseBtn {
-      //   background: url("../../../assets/play.png") no-repeat left top;
-      //   background-size: 100% 100%;
-      // }
-    }
-
-    span {
-      font-size: 16px;
-      line-height: 19px;
-      color: #000;
-      margin-left: 8px;
-      margin-right: 12px;
-      min-width: 56px;
-      text-align: right;
-    }
-  }
-  > .audioLine2 {
-    .play-icon {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      &.playBtn-icon {
-        background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
-          left top;
-        background-size: 100% 100%;
-      }
-      &.pauseBtn-icon {
-        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
-        background-size: 100% 100%;
-      }
-    }
-  }
-}
-.NPC-Big-Book-preview-green {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
-    background-size: 100% 100%;
-  }
-}
-.NPC-Big-Book-preview-red {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
-    background-size: 100% 100%;
-  }
-}
-.NPC-Big-Book-preview-brown {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
-    background-size: 100% 100%;
-  }
-}
-</style>
-<style lang="scss">
-.Audio {
-  .el-slider__button-wrapper {
-    position: relative;
-    z-index: 0;
-  }
-  .el-slider__button {
-    width: 8px;
-    height: 8px;
-    top: 12px;
-    position: absolute;
-  }
-  .el-slider__runway {
-    margin: 0;
-    padding: 0;
-    background: #e5e5e5;
-    border-radius: 0px;
-    height: 2px;
-  }
-  .el-slider {
-    position: relative;
-  }
-  .el-slider__bar {
-    height: 2px;
-    background: rgba(118, 99, 236, 1);
-  }
-  .el-slider__button {
-    background: rgba(118, 99, 236, 1);
-    border: none;
-  }
-}
-.NPC-Book-Sty {
-  .Audio {
-    .el-slider__bar {
-      height: 2px;
-      background: #de4444;
-    }
-    .el-slider__button {
-      background: #de4444;
-      border: none;
-    }
-  }
-}
-.NPC-Big-Book-preview-green {
-  .Audio {
-    .el-slider__bar {
-      background: #24b99e !important;
-    }
-    .el-slider__button {
-      background: #24b99e !important;
-    }
-  }
-}
-.NPC-Big-Book-preview-brown {
-  .Audio {
-    .el-slider__bar {
-      background: #bd8865 !important;
-    }
-    .el-slider__button {
-      background: #bd8865 !important;
-    }
-  }
-}
-</style>

src/components/Adult/preview/AudioLine.vue

@@ -144,6 +144,7 @@ export default {
     _this.$refs[audioId].addEventListener("ended", function () {
       _this.audio.playing = false;
       _this.audio.isPlaying = false;
+      _this.$emit("handleListenRead", false);
     });
 
     this.$nextTick(() => {

src/components/Adult/preview/VideoControl.vue

@@ -11,7 +11,11 @@
       @mouseout="videoOut"
     ></video>
     <div :class="['qxd', qxdShow ? 'qxdshow' : 'qxdhide']">清晰度</div> -->
-    <div :id="'videoPlayer'+indexStr" @mousemove="viedeoMove"></div>
+    <div
+      :id="'videoPlayer' + indexStr"
+      @mousemove="viedeoMove"
+      @click="videoClick"
+    ></div>
   </div>
 </template>
 
@@ -24,7 +28,7 @@ import "video.js/dist/video-js.css";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["curQue", "fn_data", "type","indexStr"],
+  props: ["curQue", "fn_data", "type", "indexStr"],
   data() {
     //这里存放数据
     return {
@@ -41,7 +45,7 @@ export default {
       handler: function () {
         //do something
         if (this.player._hasStart) {
-          this.zantingAudio()
+          //this.zantingAudio()
         }
       },
       deep: true,
@@ -71,6 +75,11 @@ export default {
         }
       }
     },
+    videoClick() {
+      if (this.player._hasStart) {
+        this.zantingAudio();
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},