flamingo-ui/es/custom-video/CustomVideo.js

火烈鸟UI组件库

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
import "./CustomVideo-sfc.css";
import "./CustomVideo-sfc-2.css";
import { ref, watch, onMounted, computed } from "vue";
import { Dialog } from "flamingo-ui";
import { Slider, Loading } from "vant";
import "vant/es/slider/style";
const __default__ = {
  components: {
    [Slider.name]: Slider,
    [Loading.name]: Loading
  },
  inheritAttrs: false
};
const __vue_sfc__ = /* @__PURE__ */ Object.assign(__default__, {
  __name: "CustomVideo",
  props: {
    // 移除弹窗方法
    videoUrl: {
      type: String,
      default: ""
    },
    videoPoster: {
      type: String,
      default: ""
    },
    needTips: {
      type: Boolean,
      default: false
    },
    autoplay: {
      type: Boolean,
      default: false
    }
  },
  setup(__props, { expose }) {
    const props = __props;
    const isTips = ref(true);
    const muted = ref(true);
    const timeout = ref(null);
    const video_play = ref(true);
    const video_value = ref(0);
    const currentTime = ref("00:00");
    const duration = ref("00:00");
    const pvideo = ref(null);
    const timer = ref(null);
    const showControls = ref(true);
    const firstPlay = ref(true);
    const dragStart = ref(false);
    const video = ref(null);
    const objectFit = ref("cover");
    watch(
      () => video_play.value,
      () => {
        if (video_play.value == false) {
          showControls.value = false;
        } else {
          clearTimeout(timeout.value);
        }
      }
    );
    watch(
      () => showControls.value,
      () => {
        if (showControls.value == true && video_play.value == false) {
          timeout.value = setTimeout(() => {
            showControls.value = false;
          }, 2e3);
        } else if (showControls.value == false && timeout.value != null) {
          clearTimeout(timeout.value);
        }
      }
    );
    onMounted(() => __async(this, null, function* () {
      yield init();
      if (video.value.videoWidth / video.value.videoHeight < 1) {
        objectFit.value = "contain";
      }
    }));
    const canplay = () => {
      setProgress();
      if (props.autoplay)
        playVideo();
    };
    const init = () => {
      pvideo.value = video.value;
    };
    const fullscreen = () => {
      if (pvideo.value.RequestFullScreen) {
        pvideo.value.RequestFullScreen();
      } else if (pvideo.value.mozRequestFullScreen) {
        pvideo.value.mozRequestFullScreen();
      } else if (pvideo.value.webkitRequestFullScreen) {
        pvideo.value.webkitRequestFullScreen();
      } else if (pvideo.value.msRequestFullscreen) {
        pvideo.value.msRequestFullscreen();
      }
    };
    const playVideo = () => {
      if (firstPlay.value)
        firstPlay.value = false;
      if (pvideo.value.paused || pvideo.value.ended) {
        pvideo.value.play();
        video_play.value = false;
        timer.value = setInterval(setProgress, 60);
      } else {
        pvideo.value.pause();
        video_play.value = true;
        clearInterval(timer.value);
        timer.value = null;
      }
    };
    const isPlay = () => {
      if (navigator.connection && navigator.connection.type != "wifi" && isTips.value && props.needTips) {
        Dialog.confirm({
          message: "\u60A8\u5F53\u524D\u5904\u4E8E\u79FB\u52A8\u7F51\u7EDC\uFF0C\u662F\u5426\u7EE7\u7EED\u89C2\u770B",
          confirmButtonText: "\u7EE7\u7EED\u89C2\u770B"
        }).then(() => {
          playVideo();
          isTips.value = false;
        }).catch(() => {
        });
      } else {
        playVideo();
      }
    };
    const setProgress = () => {
      currentTime.value = timeFomat(pvideo.value.currentTime);
      duration.value = timeFomat(pvideo.value.duration);
      if (!dragStart.value)
        video_value.value = pvideo.value.currentTime / (pvideo.value.duration / 100);
      if (currentTime.value == duration.value) {
        clearInterval(timer.value);
        timer.value = null;
        video_play.value = true;
      }
    };
    expose({
      setProgress,
      currentTime,
      duration
    });
    const dragStartMedthod = () => {
      dragStart.value = true;
      clearInterval(timeout.value);
    };
    const hanleChange = () => {
      pvideo.value.currentTime = pvideo.value.duration / 100 * video_value.value;
      dragStart.value = true;
      setProgress();
      dragStart.value = false;
    };
    const timeFomat = (time) => {
      if (isNaN(time)) {
        return "00:00";
      }
      let h = Math.floor(time / 3600);
      let m = Math.floor(time % 3600 / 60);
      let s = Math.floor(time % 60);
      m = m >= 10 ? m : "0" + m;
      s = s >= 10 ? s : "0" + s;
      if (h === 0) {
        return m + ":" + s;
      }
      return h + ":" + m + ":" + s;
    };
    const handleControls = () => {
      if (!firstPlay.value) {
        if (!showControls.value) {
          showControls.value = true;
        } else {
          showControls.value = false;
        }
      }
    };
    const __returned__ = { props, isTips, muted, timeout, video_play, video_value, currentTime, duration, pvideo, timer, showControls, firstPlay, dragStart, video, objectFit, canplay, init, fullscreen, playVideo, isPlay, setProgress, dragStartMedthod, hanleChange, timeFomat, handleControls, get Slider() {
      return Slider;
    }, get Loading() {
      return Loading;
    }, ref, watch, onMounted, computed, get Dialog() {
      return Dialog;
    } };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives, resolveComponent as _resolveComponent, createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["onClick"];
const _hoisted_2 = ["poster", "muted"];
const _hoisted_3 = ["src"];
const _hoisted_4 = ["onClick"];
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { class: "fmg-custom-video__footer" };
const _hoisted_7 = ["onClick"];
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { class: "fmg-custom-video__footer_time" };
const _hoisted_10 = ["onClick"];
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_van_slider = _resolveComponent("van-slider");
  return _openBlock(), _createElementBlock("div", {
    id: "myVideo",
    class: "fmg-custom-video",
    onClick: _withModifiers($setup.handleControls, ["stop"])
  }, [
    _createElementVNode("video", _mergeProps({
      onCanplay: $setup.canplay,
      ref: "video",
      poster: $props.videoPoster && $props.videoPoster.replace("http:", "https:"),
      width: "100%",
      "webkit-playsinline": "true",
      playsinline: "true",
      "x5-playsinline": "true",
      "x5-video-player-type": "h5",
      "x5-video-player-fullscreen": "false",
      muted: $setup.muted,
      style: `object-fit:${$setup.objectFit}`
    }, _ctx.$attrs), [
      _createElementVNode("source", {
        src: $props.videoUrl && $props.videoUrl.replace("http:", "https:")
      }, null, 8, _hoisted_3),
      _createTextVNode(" \u60A8\u7684\u6D4F\u89C8\u5668\u6682\u4E0D\u652F\u6301 ")
    ], 16, _hoisted_2),
    _withDirectives(_createElementVNode(
      "div",
      null,
      [
        _withDirectives(_createElementVNode(
          "img",
          {
            class: "volume",
            onClick: _cache[0] || (_cache[0] = _withModifiers(($event) => $setup.muted = true, ["stop"])),
            src: "https://gres.guopan.cn/png/20230315/volume.png",
            alt: "volume"
          },
          null,
          512
          /* NEED_PATCH */
        ), [
          [_vShow, !$setup.muted]
        ]),
        _withDirectives(_createElementVNode(
          "img",
          {
            class: "volume",
            onClick: _cache[1] || (_cache[1] = _withModifiers(($event) => $setup.muted = false, ["stop"])),
            src: "https://gres.guopan.cn/png/20230315/muted.png",
            alt: "muted"
          },
          null,
          512
          /* NEED_PATCH */
        ), [
          [_vShow, $setup.muted]
        ])
      ],
      512
      /* NEED_PATCH */
    ), [
      [_vShow, !$setup.showControls]
    ]),
    _withDirectives(_createElementVNode(
      "div",
      null,
      [
        _withDirectives(_createElementVNode("img", {
          onClick: _withModifiers($setup.isPlay, ["stop"]),
          class: "fmg-custom-video__btn",
          src: "https://gres.guopan.cn/png/20230315/video_play.png",
          alt: ""
        }, null, 8, _hoisted_4), [
          [_vShow, $setup.video_play]
        ]),
        _withDirectives(_createElementVNode("img", {
          onClick: _withModifiers($setup.isPlay, ["stop"]),
          class: "fmg-custom-video__btn",
          src: "https://gres.guopan.cn/png/20230315/video_stop.png",
          alt: ""
        }, null, 8, _hoisted_5), [
          [_vShow, !$setup.video_play]
        ]),
        _withDirectives(_createElementVNode(
          "div",
          _hoisted_6,
          [
            _withDirectives(_createElementVNode("img", {
              onClick: _withModifiers($setup.isPlay, ["stop"]),
              class: "fmg-custom-video__footer_btn",
              src: "https://gres.guopan.cn/png/20230315/video_play_s.png",
              alt: ""
            }, null, 8, _hoisted_7), [
              [_vShow, $setup.video_play]
            ]),
            _withDirectives(_createElementVNode("img", {
              onClick: _withModifiers($setup.isPlay, ["stop"]),
              class: "fmg-custom-video__footer_btn",
              src: "https://gres.guopan.cn/png/20230315/video_stop_s.png",
              alt: ""
            }, null, 8, _hoisted_8), [
              [_vShow, !$setup.video_play]
            ]),
            _createVNode(_component_van_slider, {
              "button-size": "1px",
              "inactive-color": "#000000",
              class: "fmg-custom-video__footer_progress",
              modelValue: $setup.video_value,
              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.video_value = $event),
              onDragStart: $setup.dragStartMedthod,
              onChange: $setup.hanleChange
            }, null, 8, ["modelValue"]),
            _createElementVNode(
              "p",
              _hoisted_9,
              _toDisplayString($setup.currentTime) + "/" + _toDisplayString($setup.duration),
              1
              /* TEXT */
            ),
            _createElementVNode("img", {
              class: "fmg-custom-video__footer_full",
              onClick: _withModifiers($setup.fullscreen, ["stop"]),
              src: "https://gres.guopan.cn/png/20230315/full.png",
              alt: "full"
            }, null, 8, _hoisted_10)
          ],
          512
          /* NEED_PATCH */
        ), [
          [_vShow, !$setup.firstPlay]
        ])
      ],
      512
      /* NEED_PATCH */
    ), [
      [_vShow, $setup.showControls]
    ])
  ], 8, _hoisted_1);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-0210e5a5";
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};