vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
105 lines (104 loc) • 3.79 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 m, 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(y, { expose: h, emit: g }) {
const t = y, o = s(), r = s(), u = s(!1), l = s(!0), n = s(!1), v = g, w = f(() => typeof t.width == "number" ? `${t.width}px` : t.width), P = f(() => typeof t.height == "number" ? `${t.height}px` : t.height);
c(
() => t.second,
() => {
p();
}
), c(
() => t.autoplay,
(e) => {
var a;
e ? (n.value = !1, l.value = !1, u.value = !0) : (n.value = !0, l.value = !0, u.value = !1, (a = o.value) == null || a.pause());
},
{
immediate: !0,
flush: "post"
}
);
function p() {
if (o.value) {
o.value.currentTime = t.second;
const e = document.createElement("canvas"), a = e.getContext("2d");
e.width = o.value.videoWidth, e.height = o.value.videoHeight, a == null || a.drawImage(o.value, 0, 0, e.width, e.height), r.value = e.toDataURL("image/png");
}
}
function $() {
l.value && (l.value = !1, o.value.currentTime = 0), u.value ? o.value.pause() : o.value.play();
}
function B() {
u.value = !1, t.playIcon && (n.value = !0), v("pause");
}
function C() {
u.value = !0, t.playIcon && (n.value = !1), v("play");
}
function I() {
l.value && (l.value = !1, o.value.currentTime = 0), u.value || o.value.play();
}
function k() {
u.value && o.value.pause();
}
return h({
play: I,
pause: k
}), (e, a) => (S(), L("div", {
class: m(["m-video", { "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: o,
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: a[0] || (a[0] = (d) => e.poster ? () => !1 : p()),
onPause: a[1] || (a[1] = (d) => B()),
onPlay: a[2] || (a[2] = (d) => C()),
onClick: T($, ["prevent"])
}, e.$attrs), " 您的浏览器不支持video标签。 ", 16, H),
E(i("span", {
class: m(["icon-play", { "icon-show": n.value }])
}, a[3] || (a[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
};