cnhis-design-vue 2.2.3 → 2.2.6

package/src/component/player-vod/player.vue

@@ -1,192 +0,0 @@
-<template>
-  <video
-    ref="video"
-    controls
-    @contextmenu.prevent
-    class="video-js vjs-default-skin vjs-big-play-centered"
-    webkit-playsinline="true"
-    playsinline
-  ></video>
-  <!-- src="https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" -->
-  <!-- class="video-js vjs-default-skin vjs-big-play-centered" -->
-</template>
-
-<script>
-/**
- * video.js 包体积优化
-    https://github.com/videojs/video.js/issues/6166
- */
-import Video from "video.js/dist/alt/video.core.novtt.js";
-import "video.js/dist/video-js.css";
-export default {
-  name: "player",
-  data: () => ({
-    player: null,
-    defaultOptions: {
-      playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
-      autoplay: true, // 如果true,浏览器准备好时开始播放。 enlarge > -1
-      muted: false, // 默认情况下将会消除任何音频。
-      loop: false, // 导致视频一结束就重新开始。
-      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-      // language: 'zh-CN',
-      // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-      // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-      // sources: [
-      //   {
-      //     type: "video/mp4",
-      //     src: "" //url地址
-      //   }
-      // ],
-      src: "",
-      poster: "", // 你的封面地址
-      // height: "600px",
-      height: 600,
-      // width: 750,
-      // width: 750,
-      width: parseInt(document.documentElement.clientWidth * 0.6),
-      controls: true,
-      notSupportedMessage: "此视频暂无法播放", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-      suppressNotSupportedError: true, // 不支持的类型是否马上展示报错信息
-      controlBar: {
-        timeDivider: true,
-        durationDisplay: true,
-        currentTimeDisplay: true,
-        remainingTimeDisplay: false,
-        pictureInPictureToggle: false, // 画中画
-        volumePanel: {
-          inline: false // 默认是true,横着的
-        }
-        // timeDivider: true,
-        // durationDisplay: true,
-        // chaptersButton: true,
-        // fullscreenToggle: true  //全屏按钮
-      },
-      errorDisplay: true,
-      posterImage: false,
-      bigPlayButton: true,
-      textTrackDisplay: false
-    }
-  }),
-  props: {
-    options: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    error(e) {
-      // 如果视频下载出错 则初始化视频至已缓冲时间的前3秒
-      let err = e.error();
-      if (err.code === 2) {
-        // 判断是否是网络加载问题
-        let buffTime = e.bufferedEnd() - 6;
-        e.load(this.playerOptions.sources[0].src);
-        e.currentTime(buffTime);
-        e.play();
-      } else {
-        this.alert.err(err.message);
-      }
-    }
-  },
-  watch: {
-    /* options: {
-                handler() {
-                    console.log('观测到options已发生变化:');
-                },
-                deep: true
-            },*/
-    src() {
-      // 侦听视频路径, 当视频路径发生改变时, 重新渲染video路径
-      this.player.src(this.src);
-      if (this.play) this.player.play();
-    },
-    play() {
-      // 侦听该属性, 当options的autoplay变为true时 直接播放视频
-      if (this.play) this.player.play();
-    }
-  },
-  computed: {
-    /* option() {
-                console.log('已计算');
-                console.log(this.options.sources[0].src);
-                // console.log(this.options.sources[0].hasOwnProperty('src'));
-                if (this.options.sources[0].src) {
-                    return this.options;
-                } else {
-                    return this.options;
-                }
-
-            },*/
-    src() {
-      return this.options.sources[0].src;
-    },
-    video() {
-      return this.$store.state.video;
-    },
-    play() {
-      return this.options.autoplay;
-    }
-  },
-  mounted() {
-    const vm = this;
-    this.player = Video(
-      this.$refs.video,
-      Object.assign(this.defaultOptions, this.options),
-      function() {
-        // this.tech_.off("dblclick");
-        this.on("play", () => {
-          // this.volume(vm.video.volume);
-        });
-
-        this.on("volumechange", () => {
-          // vm.video.volume = this.volume();
-          // window.localStorage.volume = this.volume();
-        });
-
-        this.on("error", () => {
-          let err = this.error();
-          if (err.code === 2) {
-            // 判断是否是网络加载问题
-            let buffTime = this.bufferedEnd() - 6;
-            this.load(vm.src);
-            this.currentTime(buffTime);
-            this.play();
-          } else {
-            console.log(err.message);
-          }
-        });
-      }
-    );
-  }
-};
-</script>
-<style lang="less">
-// scoped
-// 进度显示当前播放时间
-.video-js {
-  .vjs-time-control {
-    display: block;
-  }
-  // .vjs-remaining-time {
-  //   display: none;
-  // }
-  .vjs-current-time.vjs-time-control {
-    display: block;
-  }
-  .vjs-duration.vjs-time-control {
-    display: block;
-  }
-}
-
-// .video-js
-// 暂停时显示播放按钮
-.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
-// 点击屏幕播放/暂停
-.video-js.vjs-playing .vjs-tech {
-  pointer-events: auto;
-}
-</style>

package/src/component/player-vod/video-list.vue

@@ -1,262 +0,0 @@
-<template>
-  <div class="vod-list">
-    <!-- 展示列表 -->
-    <div class="show-list">
-      <template>
-        <div v-for="(item, index) in showFileList" :key="index" class="vod-wrap">
-          <!-- 上传完成 -->
-          <div class="vod-def-bg">
-            <img :src="getvideoCover(item)" class="vod-cover-img" />
-          </div>
-          <div class="icon-wrap">
-            <a-icon type="caret-right" class="icon-play" @click="palyerVod(item, index)" />
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <!-- 弹窗播放视频 -->
-    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :fileList="fileList" :palyerIndex="palyerIndex"></video-modal>
-  </div>
-</template>
-
-<script>
-import videoModal from './video-modal';
-export default {
-  name: 'videoList',
-  data() {
-    return {
-      videoVisible: false,
-      fileList: [],
-
-      palyerIndex: 0,
-      default_cover: require('@/assets/img/video_default_cover.png')
-    };
-  },
-  props: {
-    propsList: {
-      type: [Array, String],
-      default: () => []
-    },
-    columnName: {
-      type: String,
-      default: ''
-    },
-    stlist: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    showFileList() {
-      let val = this.stlist || this.propsList;
-      return this.initFileList(val) || [];
-    }
-  },
-  watch: {
-    // stlist: {
-    //   deep: true,
-    //   handler() {
-    //     if (this.stlist) {
-    //       this.initFileList(this.stlist);
-    //     }
-    //   }
-    // },
-    // propsList: {
-    //   deep: true,
-    //   immediate: true,
-    //   handler() {
-    //     if (this.propsList && this.propsList.length) {
-    //       this.initFileList(this.propsList);
-    //     }
-    //   }
-    // }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    initFileList(val) {
-      let fileList = val;
-      let resList = [];
-      if (Array.isArray(fileList)) {
-        resList = JSON.parse(JSON.stringify(fileList));
-      }
-      if (typeof fileList === 'string') {
-        resList = this.handleGetJsonStr(fileList);
-      }
-      resList.forEach(v => {
-        v.vodCoverUrl = v.vodCoverUrl || undefined;
-        let vodUrl = v.url || v.videoUrl;
-        let strList = vodUrl.split('.');
-        let last = strList[strList.length - 1];
-        let type = `video/${last}`;
-        v.playerOptions = {
-          sources: [
-            {
-              type,
-              src: vodUrl
-            }
-          ]
-        };
-      });
-      this.$set(this, 'fileList', resList || []);
-      return resList;
-    },
-
-    handleGetJsonStr(str) {
-      // [], {type: 'jsonb', value: "[]"}
-      let resList = [];
-      if (this.$utils.isJSON(str)) {
-        resList = JSON.parse(str);
-      } else {
-        resList = typeof str === 'string' ? [] : str;
-      }
-      if (resList && resList.type === 'jsonb') {
-        if (this.$utils.isJSON(resList.value)) {
-          resList = JSON.parse(resList.value);
-          // loop
-          if (resList.type === 'jsonb') {
-            resList = this.handleGetJsonStr(resList);
-          }
-        }
-      }
-      return resList;
-    },
-
-    /** 播放视频 */
-    palyerVod(data, index) {
-      this.palyerIndex = index;
-      let vodUrl = data.url || data.videoUrl;
-      let strList = vodUrl.split('.');
-      let last = strList[strList.length - 1];
-      let type = `video/${last}`;
-      this.playerOptions = {
-        sources: [
-          {
-            type,
-            src: vodUrl
-          }
-        ]
-      };
-      this.videoVisible = true;
-    },
-
-    /**
-     * 面图图加载报错
-     */
-    coverImgOnError(e) {
-      let oldUrl = e.target.src;
-      let randomKeys = new Date().getTime().toString();
-      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
-    },
-
-    /**
-     * 拼接封面图
-     */
-    handleGetCoverUrl(vodUrl) {
-      if (typeof vodUrl === 'string') {
-        let strList = vodUrl.split('/');
-        let len = strList.length;
-        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
-        let imgUrl = strList.join('/');
-        return imgUrl;
-      }
-      return '';
-    },
-
-    getvideoCover(item) {
-      return item.vodCoverUrl || this.default_cover;
-    }
-  },
-  components: {
-    videoModal
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.vod-list {
-  height: 100%;
-}
-.show-list {
-  height: 100%;
-  display: flex;
-  padding: 3px 0;
-}
-.vod-wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  height: 100%;
-  // height: 70px;
-  // width: 125px;
-  width: fit-content;
-  // min-width: 36px;
-  // min-height: 36px;
-  // padding: 0 10px;
-  margin-right: 5px;
-  overflow: hidden;
-  // border: 1px solid #eeeeee;
-
-  .vod-def-bg {
-    width: 100%;
-    height: 100%;
-    // background-color: #4e4e4e;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(50, 50, 51, 0.3);
-
-    .vod-cover-img {
-      // height: 100%;
-      height: 130px;
-      width: 210px;
-      object-fit: cover;
-    }
-  }
-
-  .icon-wrap {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-play {
-    // position: absolute;
-    // top: 50%;
-    // left: 50%;
-    // z-index: 1;
-    // display: block;
-    // width: 20px;
-    // height: 20px;
-    // margin: -10px 0 0 -10px;
-    // font-size: 18px;
-    color: #fff;
-    opacity: 0.8;
-    transform: scale3d(2, 2, 2);
-    transition: all 0.25s ease-out;
-  }
-}
-
-.player-wrap {
-  padding: 100px 0;
-  height: 100%;
-  width: 100%;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-}
-</style>

package/src/component/player-vod/video-modal.vue

@@ -1,128 +0,0 @@
-<template>
-  <a-modal
-    :visible="previewVisible"
-    :footer="null"
-    @cancel="handleCancel"
-    wrapClassName="image-modal"
-    width="65vw"
-    :bodyStyle="{
-      height: '600px',
-      overflowY: 'auto'
-    }"
-  >
-    <div class="preview-wrap">
-      <div class="preview">
-        <playerVod
-          :playerOptions="playerOptions"
-          v-if="fileList && fileList.length === 0"
-        ></playerVod>
-        <a-carousel v-else arrows :initialSlide="palyerIndex">
-          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
-            <a-icon type="left-circle" />
-          </div>
-          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
-            <a-icon type="right-circle" />
-          </div>
-          <template v-for="(v, i) in fileList">
-            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
-          </template>
-        </a-carousel>
-      </div>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import { Modal, Carousel } from 'ant-design-vue'
-import playerVod from "./index";
-export default {
-  name: "videoModal",
-  data() {
-    return {
-      previewVisible: this.visible
-    };
-  },
-  props: {
-    visible: Boolean,
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: "video/mp4",
-            src: ""
-          }
-        ]
-      })
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    palyerIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {},
-  watch: {
-    visible(value) {
-      this.previewVisible = value;
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    handleCancel() {
-      this.$emit("update:visible", false);
-      this.previewVisible = false;
-    }
-  },
-  components: {
-    playerVod,
-    AModal: Modal,
-    [Carousel.name]: Carousel
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.preview-wrap {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .preview {
-    padding: 20px 0;
-    width: 60vw;
-    height: 100%;
-    // height: 60vh;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-  }
-}
-.ant-carousel /deep/ .custom-slick-arrow {
-  width: 25px;
-  height: 25px;
-  font-size: 25px;
-  color: #fff;
-  background-color: rgba(31, 45, 61, 0.11);
-  opacity: 0.5;
-}
-.ant-carousel /deep/ .custom-slick-arrow:before {
-  display: none;
-}
-.ant-carousel /deep/ .custom-slick-arrow:hover {
-  opacity: 0.5;
-  color: #fff;
-}
-</style>