vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
104 lines (103 loc) • 3.75 kB
JavaScript
import { defineComponent as z, ref as s, computed as f, watch as c, createElementBlock as L, openBlock as S, normalizeStyle as b, normalizeClass as y, createElementVNode as i, withDirectives as E, mergeProps as R, withModifiers as T, vShow as D } from "vue";
const H = ["src", "poster", "autoplay", "controls", "loop", "muted", "preload"], V = /* @__PURE__ */ z({
__name: "Video",
props: {
width: { default: 800 },
height: { default: 450 },
src: { default: void 0 },
poster: { default: void 0 },
second: { default: 0.5 },
fit: { default: "contain" },
autoplay: { type: Boolean, default: !1 },
controls: { type: Boolean, default: !0 },
loop: { type: Boolean, default: !1 },
muted: { type: Boolean, default: !1 },
preload: { default: "metadata" },
playIcon: { type: Boolean, default: !0 },
iconSize: { default: 80 }
},
emits: ["play", "pause"],
setup(m, { expose: h, emit: g }) {
const o = m, a = s(), r = s(), u = s(!1), l = s(!0), n = s(!1), v = g, w = f(() => typeof o.width == "number" ? `${o.width}px` : o.width), P = f(() => typeof o.height == "number" ? `${o.height}px` : o.height);
c(
() => o.second,
() => {
p();
}
), c(
() => o.autoplay,
(e) => {
e ? (n.value = !1, l.value = !1, u.value = !0) : (n.value = !0, l.value = !0, u.value = !1, a.value?.pause());
},
{
immediate: !0,
flush: "post"
}
);
function p() {
if (a.value) {
a.value.currentTime = o.second;
const e = document.createElement("canvas"), t = e.getContext("2d");
e.width = a.value.videoWidth, e.height = a.value.videoHeight, t?.drawImage(a.value, 0, 0, e.width, e.height), r.value = e.toDataURL("image/png");
}
}
function $() {
l.value && (l.value = !1, a.value.currentTime = 0), u.value ? a.value.pause() : a.value.play();
}
function B() {
u.value = !1, o.playIcon && (n.value = !0), v("pause");
}
function C() {
u.value = !0, o.playIcon && (n.value = !1), v("play");
}
function I() {
l.value && (l.value = !1, a.value.currentTime = 0), u.value || a.value.play();
}
function k() {
u.value && a.value.pause();
}
return h({
play: I,
pause: k
}), (e, t) => (S(), L("div", {
class: y(["video-wrap", { "video-hover": n.value }]),
style: b(`--video-width: ${w.value}; --video-height: ${P.value}; --video-icon-scale: ${e.iconSize / 80};`)
}, [
i("video", R({
ref_key: "veoRef",
ref: a,
class: "video-element",
style: `object-fit: ${e.fit};`,
src: e.src,
poster: e.poster ? e.poster : r.value,
autoplay: e.autoplay,
controls: !l.value && e.controls,
loop: e.loop,
muted: e.autoplay || e.muted,
preload: e.preload,
crossorigin: "anonymous",
onLoadedmetadata: t[0] || (t[0] = (d) => e.poster ? () => !1 : p()),
onPause: t[1] || (t[1] = (d) => B()),
onPlay: t[2] || (t[2] = (d) => C()),
onClick: T($, ["prevent"])
}, e.$attrs), " 您的浏览器不支持video标签。 ", 16, H),
E(i("span", {
class: y(["icon-play", { "icon-show": n.value }])
}, [...t[3] || (t[3] = [
i("svg", {
class: "play-svg",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 34 34"
}, [
i("path", { d: `M28.26,11.961L11.035,0.813C7.464-1.498,3,1.391,3,6.013v21.974c0,4.622,4.464,7.511,8.035,5.2L28.26,22.039\r
C31.913,19.675,31.913,14.325,28.26,11.961z` })
], -1)
])], 2), [
[D, l.value || e.playIcon]
])
], 6));
}
});
export {
V as default
};