com.kasite.client.uniapp.modules/plugins/aliyun-video/uni-app/aliyun-video.vue

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

    <!-- #ifdef H5 || WEB || MP-GONGZHONGHAO -->
    <div id="mui-player"></div>
    <!-- #endif -->
  </block>
</template>

<script>
import { nextTick } from "vue";
import { handle, request } from "@kasite/uni-app-base";
import { REQUEST_CONFIG } from "@kasite/uni-app-base/config";
import "mui-player/dist/mui-player.min.css";
import MuiPlayer from "mui-player";
import Hls from "hls.js";

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;
        //#ifdef H5 || WEB || MP-GONGZHONGHAO
        nextTick(() => this.mpPlayerInit());
        //#endif
      }
    },
    mpPlayerInit() {
      const dom = this.$el;
      var mp = new MuiPlayer({
        container: dom,
        src: this.url,
        parse: {
          type: "hls",
          loader: Hls,
          config: {
            // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
            debug: false,
          },
        },
        // pageHead: false,
        height: "220px",
      });
    },
  },
  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>