src/components/mini/box15-videoPlayBox.vue

@@ -1,12 +1,12 @@
<template>
   <div>
      <div>
      <div v-if="!this.$attrs.showTar">
         正在播放: <span> {{playingVideoData.title}} </span>
      </div>
      <div class="myVideo fade">
      <div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}">
         <div id="videoPlay" ref="myVdeoPlay"></div>
      </div>
      <div style="border-radius: 0 0 4px 4px;">
      <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">

         <div style="padding: 10px 0px;">
            音量 :
@@ -55,6 +55,7 @@
   export default {
      data() {
         return {
            disabledPointer: false,
            dp: null,
            playHistory: [],
            playRecordIds: [],
@@ -64,7 +65,7 @@
            currentTime: 0,
            duration: 0,
            playingVideoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               pic: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               url: "",
               type: "normal",
               title: "",
@@ -79,7 +80,7 @@
         var _this = this;

         //调整音量
         _this.$message.success("模块加载完成,请注意音量是否合适..")
         //_this.$message.success("模块加载完成,请注意音量是否合适..")

         this.dp.volume(this.volumeInit, true, false);

@@ -101,6 +102,13 @@
         this.dp.on('volumechange', function() {
            _this.volumeInit = _this.dp.video.volume;
         });
         this.dp.on('loadedmetadata', function() {
            _this.duration = _this.dp.video.duration;
         });
         this.dp.on('error', function() {
            _this.duration = 0
            _this.disabledPointer = true
         });

      },
      methods: {
@@ -120,6 +128,7 @@
         },
         //切换视频源
         swichPlay(videoId) {

            if (this.swichLock) {
               this.$message.info("切换太快啦,缓一缓..", 5)
               return
@@ -164,6 +173,12 @@
               return
            }

            if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
               videoData.type = "customHls";
            } else {
               videoData.type = "normal";
            }

            //重要!!防止hls类型视频在切换后不停在后台缓存
            if (this.hls != null) {
               this.hls.destroy();
@@ -173,12 +188,16 @@

            this.playingVideoData = videoData

            this.disabledPointer = false;
            this.isPlaying = false;

            //重要!!防止hls类型视频在切换后不停在后台缓存
            if (videoData.type == "customHls") {
               this.hls = new Hls();

            }

            this.dp.notice("播放器加载完成..", 3)

            this.dp.switchVideo(this.playingVideoData)

@@ -225,7 +244,18 @@
                        if (_this.hls != null) {
                           _this.hls.loadSource(video.src)
                           _this.hls.attachMedia(video)

                           // 监听Hls.Events.ERROR事件，
                           // DNS解析、下载超时，都会触发manifestLoadError错误
                           _this.hls.on(Hls.Events.ERROR, function(eventName, data) {
                              // 埋点上报，可以追踪data.details
                              // track()
                              _this.$message.error("hls加载异常", 5)
                              console.log(eventName);
                              console.log(data);
                           })
                        }

                     }
                  }
               }
@@ -285,7 +315,7 @@
      height: 180px;
      background-color: #565656;
      border-radius: 10px;
      margin: 20px 0px;
      margin: 20px auto;
      display: grid;
   }