vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
104 lines (103 loc) • 3.75 kB
JavaScript
import { defineComponent as k, ref as s, computed as p, watch as y, createElementBlock as z, openBlock as L, normalizeStyle as S, normalizeClass as m, createElementVNode as v, withDirectives as b, mergeProps as E, withModifiers as R, vShow as T } from "vue";
const D = ["src", "poster", "autoplay", "controls", "loop", "muted", "preload"], M = /* @__PURE__ */ k({
__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(e, { expose: h, emit: g }) {
const a = e, t = s(), r = s(), n = s(!1), u = s(!0), i = s(!1), d = g, w = p(() => typeof a.width == "number" ? `${a.width}px` : a.width), P = p(() => typeof a.height == "number" ? `${a.height}px` : a.height);
y(
() => a.second,
() => {
f();
}
), y(
() => a.autoplay,
(l) => {
l ? (i.value = !1, u.value = !1, n.value = !0) : (i.value = !0, u.value = !0, n.value = !1, t.value?.pause());
},
{
immediate: !0,
flush: "post"
}
);
function f() {
if (t.value) {
t.value.currentTime = a.second;
const l = document.createElement("canvas"), o = l.getContext("2d");
l.width = t.value.videoWidth, l.height = t.value.videoHeight, o?.drawImage(t.value, 0, 0, l.width, l.height), r.value = l.toDataURL("image/png");
}
}
function $() {
u.value && (u.value = !1, t.value.currentTime = 0), n.value ? t.value.pause() : t.value.play();
}
function x() {
n.value = !1, a.playIcon && (i.value = !0), d("pause");
}
function B() {
n.value = !0, a.playIcon && (i.value = !1), d("play");
}
function C() {
u.value && (u.value = !1, t.value.currentTime = 0), n.value || t.value.play();
}
function I() {
n.value && t.value.pause();
}
return h({
play: C,
pause: I
}), (l, o) => (L(), z("div", {
class: m(["video-wrap", { "video-hover": i.value }]),
style: S(`--video-width: ${w.value}; --video-height: ${P.value}; --video-icon-scale: ${e.iconSize / 80};`)
}, [
v("video", E({
ref_key: "veoRef",
ref: t,
class: "video-element",
style: `object-fit: ${e.fit};`,
src: e.src,
poster: e.poster ? e.poster : r.value,
autoplay: e.autoplay,
controls: !u.value && e.controls,
loop: e.loop,
muted: e.autoplay || e.muted,
preload: e.preload,
crossorigin: "anonymous",
onLoadedmetadata: o[0] || (o[0] = (c) => e.poster ? () => !1 : f()),
onPause: o[1] || (o[1] = (c) => x()),
onPlay: o[2] || (o[2] = (c) => B()),
onClick: R($, ["prevent"])
}, l.$attrs), " 您的浏览器不支持video标签。 ", 16, D),
b(v("span", {
class: m(["icon-play", { "icon-show": i.value }])
}, [...o[3] || (o[3] = [
v("svg", {
class: "play-svg",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 34 34"
}, [
v("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), [
[T, u.value || e.playIcon]
])
], 6));
}
});
export {
M as default
};