cione-comp-lib/es/packages/co-video-std/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, nextTick, toRefs, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, createBlock, Teleport, createStaticVNode, pushScopeId, popScopeId } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoVideoStd",
  props: {
    src: {
      type: String
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    isControls: {
      type: Boolean
    },
    isAutoplay: {
      type: Boolean
    },
    isLoop: {
      type: Boolean
    },
    posterSrc: {
      type: String
    },
    objectFit: {
      type: String
    }
  },
  setup(props) {
    const videoSrc = ref(props.src);
    const videoBox = ref();
    const videoDom = ref();
    const videoPreDom = ref();
    const isPreview = ref(false);
    const isVideo = ref(true);
    const previewFn = () => {
      isPreview.value = true;
      let currentTime = videoDom.value.currentTime.toFixed(1);
      videoDom.value.pause();
      nextTick(() => {
        videoPreDom.value.currentTime = currentTime;
      });
    };
    const fullScreenFn = () => {
      videoDom.value.pause();
      let currentTime = videoDom.value.currentTime.toFixed(1);
      videoDom.value.requestFullscreen();
      nextTick(() => {
        videoPreDom.value.currentTime = currentTime;
      });
    };
    const closeFn = () => {
      isPreview.value = false;
      videoDom.value.play();
    };
    const updataVideoSrc = (url) => {
      videoSrc.value = url;
    };
    const updataVideoStop = () => {
      videoDom.value.pause();
    };
    const updataVideoStart = () => {
      videoDom.value.play();
    };
    const updataVideoRestart = () => {
      videoDom.value.currentTime = 0;
      videoDom.value.play();
    };
    watch(
      () => props.isAutoplay,
      () => {
        isVideo.value = false;
        nextTick(() => {
          isVideo.value = true;
        });
      }
    );
    watch(
      () => props.src,
      () => {
        isVideo.value = false;
        nextTick(() => {
          isVideo.value = true;
          videoSrc.value = props.src;
        });
      }
    );
    return {
      videoSrc,
      videoBox,
      videoDom,
      videoPreDom,
      isPreview,
      isVideo,
      previewFn,
      fullScreenFn,
      closeFn,
      updataVideoSrc,
      updataVideoStop,
      updataVideoStart,
      updataVideoRestart,
      ...toRefs(props)
    };
  }
});
const _withScopeId = (n) => (pushScopeId("data-v-32c3ad4a"), n = n(), popScopeId(), n);
const _hoisted_1 = ["src", "controls", "muted", "autoplay", "loop", "poster"];
const _hoisted_2 = ["src"];
const _hoisted_3 = ["src"];
const _hoisted_4 = ["src"];
const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<svg viewBox="0 0 1024 1024" width="20px" height="20px" data-v-32c3ad4a><path d="M270.08 64.064l-179.2 0C76.032 64.064 64 76.096 64 90.944l0 178.688c0 0.128 0 0.256 0 0.384C64 284.928 76.032 296.96 90.88 296.96s27.008-12.032 27.008-26.944c0-1.536-0.256-3.136-0.512-4.608L117.376 122.176c0-2.496 1.984-4.48 4.416-4.48l145.408 0C268.16 117.76 269.12 117.952 270.08 117.952c14.848 0 26.944-12.032 26.944-26.944S284.928 64.064 270.08 64.064z" fill="#ffffff" data-v-32c3ad4a></path><path d="M847.552 830.784c0 9.856-8.128 17.856-17.92 17.856L190.528 848.64c-9.856 0-17.856-8-17.856-17.856L172.672 191.744c0-9.92 8-17.92 17.856-17.92l639.104 0c9.792 0 17.92 8 17.92 17.92L847.552 830.784z" fill="#ffffff" data-v-32c3ad4a></path><path d="M753.792 64.064l179.2 0c14.848 0 26.88 12.032 26.88 26.88l0 178.688C959.872 269.76 960 269.888 960 270.016c0 14.912-12.096 26.944-27.008 26.944s-26.944-12.032-26.944-26.944c0-1.536 0.256-3.136 0.448-4.608L906.496 122.176c0-2.496-1.92-4.48-4.48-4.48l-145.344 0c-1.024 0.064-1.856 0.256-2.88 0.256-14.848 0-26.88-12.032-26.88-26.944S738.944 64.064 753.792 64.064z" fill="#ffffff" data-v-32c3ad4a></path><path d="M270.08 959.936l-179.2 0C76.032 959.936 64 947.968 64 933.12l0-178.752c0-0.128 0-0.256 0-0.384 0-14.912 12.032-27.008 26.88-27.008s27.008 12.032 27.008 27.008c0 1.536-0.256 3.136-0.512 4.608l0 143.168c0 2.496 1.984 4.48 4.416 4.48l145.408 0c0.96-0.064 1.856-0.256 2.816-0.256 14.848 0 26.944 12.032 26.944 26.944S284.928 959.936 270.08 959.936z" fill="#ffffff" data-v-32c3ad4a></path><path d="M753.792 959.936l179.2 0c14.848 0 26.88-12.032 26.88-26.816l0-178.752c0-0.128 0.128-0.256 0.128-0.384 0-14.912-12.096-27.008-27.008-27.008s-26.944 12.032-26.944 27.008c0 1.536 0.256 3.136 0.448 4.608l0 143.168c0 2.496-1.92 4.48-4.48 4.48l-145.344 0c-1.024-0.064-1.856-0.256-2.88-0.256-14.848 0-26.88 12.032-26.88 26.944S738.944 959.936 753.792 959.936z" fill="#ffffff" data-v-32c3ad4a></path></svg>', 1);
const _hoisted_6 = [
  _hoisted_5
];
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
  viewBox: "0 0 1024 1024",
  width: "20px",
  height: "20px"
}, [
  /* @__PURE__ */ createElementVNode("path", {
    d: "M237.248 192H352a32 32 0 1 0 0-64H160a32 32 0 0 0-32 32v192a32 32 0 1 0 64 0v-114.752l137.36 137.36a32 32 0 1 0 45.232-45.264L237.248 192zM832 237.248V352a32 32 0 1 0 64 0V160a32 32 0 0 0-32-32H672a32 32 0 1 0 0 64h114.752l-137.36 137.36a32 32 0 1 0 45.264 45.232L832 237.248zM237.248 832H352a32 32 0 1 1 0 64H160a32 32 0 0 1-32-32V672a32 32 0 1 1 64 0v114.752l137.36-137.36a32 32 0 1 1 45.232 45.264L237.248 832zM832 786.752V672a32 32 0 1 1 64 0v192a32 32 0 0 1-32 32H672a32 32 0 1 1 0-64h114.752l-137.36-137.36a32 32 0 1 1 45.264-45.232L832 786.752z",
    fill: "#ffffff"
  })
], -1));
const _hoisted_8 = [
  _hoisted_7
];
const _hoisted_9 = {
  key: 0,
  class: "video-std__pre"
};
const _hoisted_10 = ["src", "muted", "autoplay", "loop", "poster"];
const _hoisted_11 = ["src"];
const _hoisted_12 = ["src"];
const _hoisted_13 = ["src"];
const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
  /* @__PURE__ */ createElementVNode("path", {
    fill: "currentColor",
    d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
  })
], -1));
const _hoisted_15 = [
  _hoisted_14
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-video-std",
    ref: "videoBox",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    _ctx.isVideo ? (openBlock(), createElementBlock("video", {
      class: normalizeClass(_ctx.isControls ? "video-std__video" : ""),
      style: normalizeStyle({ width: "100%", height: "100%", objectFit: _ctx.objectFit }),
      src: _ctx.videoSrc,
      controls: _ctx.isControls,
      muted: _ctx.isAutoplay ? true : false,
      autoplay: _ctx.isAutoplay,
      loop: _ctx.isLoop,
      poster: _ctx.posterSrc,
      key: _ctx.videoSrc,
      ref: "videoDom"
    }, [
      createElementVNode("source", {
        src: _ctx.videoSrc,
        type: "video/mp4"
      }, null, 8, _hoisted_2),
      createElementVNode("source", {
        src: _ctx.videoSrc,
        type: "video/ogg"
      }, null, 8, _hoisted_3),
      createElementVNode("source", {
        src: _ctx.videoSrc,
        type: "video/webm"
      }, null, 8, _hoisted_4)
    ], 14, _hoisted_1)) : createCommentVNode("", true),
    createElementVNode("div", {
      class: normalizeClass(`video-std__top ${_ctx.isControls ? "video-std__top_hover" : ""}`)
    }, [
      createElementVNode("span", {
        class: "video-std__top_span",
        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.previewFn && _ctx.previewFn(...args)),
        title: "\u5F39\u7A97\u9884\u89C8"
      }, _hoisted_6),
      createElementVNode("span", {
        class: "video-std__top_span",
        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.fullScreenFn && _ctx.fullScreenFn(...args)),
        title: "\u5168\u5C4F"
      }, _hoisted_8)
    ], 2),
    (openBlock(), createBlock(Teleport, { to: "body" }, [
      _ctx.isPreview ? (openBlock(), createElementBlock("div", _hoisted_9, [
        (openBlock(), createElementBlock("video", {
          style: { width: "90%", height: "90%" },
          src: _ctx.videoSrc,
          controls: "true",
          muted: _ctx.isAutoplay === true ? true : false,
          autoplay: _ctx.isAutoplay,
          loop: _ctx.isLoop,
          poster: _ctx.posterSrc,
          key: _ctx.videoSrc,
          ref: "videoPreDom"
        }, [
          createElementVNode("source", {
            src: _ctx.videoSrc,
            type: "video/mp4"
          }, null, 8, _hoisted_11),
          createElementVNode("source", {
            src: _ctx.videoSrc,
            type: "video/ogg"
          }, null, 8, _hoisted_12),
          createElementVNode("source", {
            src: _ctx.videoSrc,
            type: "video/webm"
          }, null, 8, _hoisted_13)
        ], 8, _hoisted_10)),
        createElementVNode("span", {
          class: "video-std__pre-cloxe",
          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.closeFn && _ctx.closeFn(...args))
        }, _hoisted_15)
      ])) : createCommentVNode("", true)
    ]))
  ], 4);
}
var Video = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-32c3ad4a"]]);
export { Video as default };