com.kasite.client.uniapp.modules/dist/uni-app/components/mp-html/aliyun-video/aliyun-video.vue

<template>
  <view :class="loadingClass" v-if="!url">{{ loadingText }}</view>
  <block v-else>
    <video :src="url"></video>
  </block>
</template>

<script>
import { handle, request } from "@kasite/uni-app-base";
import { REQUEST_CONFIG } from "@kasite/uni-app-base/config"
export default {
  props: {
    // 视频ID
    videoId: {
      type: [String, null],
      default: null,
    },
  },
  data() {
    return {
      url: "",
      loadingText: "视频解码中",
      loadingClass: "aliyun-video-loading-text",
    };
  },
  methods: {
    async doPost(url, data, options) {
      let resp = handle.promistHandleNew(await request.doPost(url, data, options));
      return handle.catchPromiseNew(resp, () => resp, options);
    },
    async getVideoUrlByIdasync(id) {
      if (!id) return;
      const { resp } = await this.doPost(`${REQUEST_CONFIG.BASE_URL}wsgw/article/video/GetVideoUrl/callApiJSON.do`, { ID: id });
      const url = resp && resp.length ? resp[0].Url : "";
      if (!url) {
        this.loadingClass = "aliyun-video-loading-fail-text";
        this.loadingText = "视频未完成解码，请刷新页面或稍后再试";
      } else {
        this.url = url;
      }
    },
  },
  mounted() {
    this.getVideoUrlByIdasync(this.videoId);
  },
};
</script>

<style>
.aliyun-video-loading-fail-text {
  color: red;
}
.aliyun-video-loading-text::after {
  animation: aliyun-video-loading-dots 2s linear infinite;
  content: "";
}
@keyframes aliyun-video-loading-dots {
  0% {
    content: ".";
  }

  30% {
    content: "..";
  }

  60% {
    content: "...";
  }

  90% {
    content: "";
  }
}
</style>